Merge branch 'nextui-org:canary' into adding-isClearable-to-select

.changeset/curly-zoos-thank.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/listbox": patch
+---
+
+change ListboxItem key to optional (#3880)

.changeset/forty-doors-flash.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+remove the pseudo cancel btn from input (#3907)

.changeset/quick-geckos-punch.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+separator icon RTL support in Breadcrumbs component (#2486)

.changeset/tricky-fans-draw.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+show margin only with label in Switch component (#3791)

.github/pull_request_template.md

@@ -11,15 +11,15 @@ Closes # <!-- Github issue # here -->
 
 ## 📝 Description
 
-> Add a brief description
+<!--- Add a brief description -->
 
 ## ⛳️ Current behavior (updates)
 
-> Please describe the current behavior that you are modifying
+<!--- Please describe the current behavior that you are modifying -->
 
 ## 🚀 New behavior
 
-> Please describe the behavior or changes this PR adds
+<!--- Please describe the behavior or changes this PR adds -->
 
 ## 💣 Is this a breaking change (Yes/No):
 

apps/docs/app/blog/[slug]/page.tsx

@@ -1,7 +1,7 @@
 import type {Metadata} from "next";
 
 import {notFound} from "next/navigation";
-import {allBlogPosts} from "contentlayer/generated";
+import {allBlogPosts} from "contentlayer2/generated";
 import {Link, User} from "@nextui-org/react";
 import {format, parseISO} from "date-fns";
 import NextLink from "next/link";

apps/docs/app/blog/page.tsx

@@ -1,4 +1,4 @@
-import {allBlogPosts} from "contentlayer/generated";
+import {allBlogPosts} from "contentlayer2/generated";
 import {compareDesc} from "date-fns";
 
 import {BlogPostList} from "@/components/blog-post";

apps/docs/app/docs/[[...slug]]/page.tsx

@@ -1,7 +1,7 @@
 import type {Metadata} from "next";
 
 import {notFound} from "next/navigation";
-import {allDocs} from "contentlayer/generated";
+import {allDocs} from "contentlayer2/generated";
 import {Link} from "@nextui-org/react";
 
 import {MDXContent} from "@/components/mdx-content";

apps/docs/app/feed.xml/route.ts

@@ -1,5 +1,5 @@
 import Rss from "rss";
-import {allBlogPosts} from "contentlayer/generated";
+import {allBlogPosts} from "contentlayer2/generated";
 
 import {siteConfig} from "@/config/site";
 import {allCoreContent} from "@/libs/contentlayer";

apps/docs/components/blog-post.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import {BlogPost} from "contentlayer/generated";
+import {BlogPost} from "contentlayer2/generated";
 import {Card, CardFooter, CardBody, CardHeader, Link, Avatar, Image} from "@nextui-org/react";
 import Balancer from "react-wrap-balancer";
 import {format, parseISO} from "date-fns";

apps/docs/components/code-window/code-block.tsx

@@ -6,7 +6,7 @@ import jsx from "refractor/lang/jsx";
 import bash from "refractor/lang/bash";
 import css from "refractor/lang/css";
 import diff from "refractor/lang/diff";
-import hastToHtml from "hast-util-to-html";
+import {toHtml} from "hast-util-to-html";
 import rangeParser from "parse-numeric-range";
 import {clsx} from "@nextui-org/shared-utils";
 
@@ -137,7 +137,7 @@ const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>((_props, forw
   result = highlightWord(result);
 
   // convert to html
-  result = hastToHtml(result);
+  result = toHtml(result);
 
   // TODO reset theme
   const classes = `language-${language}`;

apps/docs/components/docs/components/codeblock.tsx

@@ -150,6 +150,7 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
                 "scrollbar-hide overflow-x-scroll": hideScrollBar,
               })}
               style={style}
+              translate="no"
             >
               {tokens.map((line, i) => {
                 const lineProps = getLineProps({line, key: i});

apps/docs/components/marketing/hero/hero.tsx

@@ -20,18 +20,18 @@ export const Hero = () => {
     trackEvent("NavbarItem", {
       name,
       action: "press",
-      category: "home - gero",
+      category: "home - hero",
       data: url,
     });
   };
 
   return (
     <section className="flex relative overflow-hidden lg:overflow-visible w-full flex-nowrap justify-between items-center h-[calc(100vh_-_64px)] 2xl:h-[calc(84vh_-_64px)]">
-      <div className="flex relative z-20 flex-col gap-6 w-full lg:w-1/2 xl:mt-10">
-        <div className="w-full flex justify-center md:hidden">
+      <div className="relative z-20 flex flex-col w-full gap-6 lg:w-1/2 xl:mt-10">
+        <div className="flex justify-center w-full md:hidden">
           <Chip
             as={NextLink}
-            className="bg-default-100/50 hover:bg-default-100 border-default-200/80 dark:border-default-100/80 transition-colors cursor-pointer"
+            className="transition-colors cursor-pointer bg-default-100/50 hover:bg-default-100 border-default-200/80 dark:border-default-100/80"
             color="default"
             href="/blog/v2.3.0"
             variant="dot"
@@ -43,7 +43,7 @@ export const Hero = () => {
             </span>
           </Chip>
         </div>
-        <div className="text-center leading-8 md:leading-10 md:text-left">
+        <div className="leading-8 text-center md:leading-10 md:text-left">
           <div className="inline-block">
             <h1 className={title()}>Make&nbsp;</h1>
             <h1 className={title({color: "violet"})}>beautiful&nbsp;</h1>
@@ -53,7 +53,7 @@ export const Hero = () => {
         <h2 className={subtitle({fullWidth: true, class: "text-center md:text-left"})}>
           Beautiful, fast and modern React UI library.
         </h2>
-        <div className="flex flex-col md:flex-row items-center gap-4">
+        <div className="flex flex-col items-center gap-4 md:flex-row">
           <Button
             as={NextLink}
             className="w-full md:h-11 md:w-auto"
@@ -79,7 +79,7 @@ export const Hero = () => {
             Get Started
           </Button>
           <Snippet
-            className="w-full rounded-full hidden md:flex sm:w-auto"
+            className="hidden w-full rounded-full md:flex sm:w-auto"
             copyButtonProps={{
               radius: "full",
             }}

apps/docs/components/mdx-content.tsx

@@ -2,7 +2,7 @@
 "use client";
 import type {MDXComponents as MDXComponentsType} from "mdx/types";
 
-import {useMDXComponent} from "next-contentlayer/hooks";
+import {useMDXComponent} from "next-contentlayer2/hooks";
 
 import {MDXComponents} from "./mdx-components";
 

apps/docs/components/sandpack/entries.ts

@@ -10,7 +10,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
     <NextUIProvider>
       <div className="w-screen h-screen p-8 flex items-start justify-center">
         <App />
-      </div>  
+      </div>
     </NextUIProvider>
   </React.StrictMode>
 );`;

apps/docs/content/components/accordion/bordered-variant.raw.jsx

@@ -0,0 +1,20 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const defaultContent =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion variant="bordered">
+      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}

apps/docs/content/components/accordion/bordered-variant.ts

@@ -1,23 +1,4 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-  return (
-    <Accordion variant="bordered">
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./bordered-variant.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/accordion/compact.raw.jsx

@@ -0,0 +1,20 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const defaultContent =
+    "Lorem Innei ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion isCompact>
+      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}

apps/docs/content/components/accordion/compact.ts

@@ -1,23 +1,4 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-  return (
-    <Accordion isCompact>
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./compact.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/accordion/controlled.raw.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const [selectedKeys, setSelectedKeys] = React.useState(new Set(["1"]));
+  const defaultContent =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
+      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}

apps/docs/content/components/accordion/controlled.raw.tsx

@@ -0,0 +1,24 @@
+import type {Selection} from "@nextui-org/react";
+
+import React from "react";
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(["1"]));
+  const defaultContent =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
+      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}

apps/docs/content/components/accordion/controlled.ts

@@ -1,54 +1,5 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const [selectedKeys, setSelectedKeys] = React.useState(new Set(["1"]));
-
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-  return (
-    <Accordion
-      selectedKeys={selectedKeys}
-      onSelectionChange={setSelectedKeys}
-    >
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
-
-const AppTs = `import type {Selection} from "@nextui-org/react";
-
-import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(["1"]));
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-  return (
-    <Accordion
-      selectedKeys={selectedKeys}
-      onSelectionChange={setSelectedKeys}
-    >
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
+import AppTs from "./controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,