ci(changesets): version packages (#3755)

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

.eslintrc.json

@@ -87,6 +87,7 @@
         "prev": ["const", "let", "var"],
         "next": ["const", "let", "var"]
       }
-    ]
+    ],
+    "import/consistent-type-specifier-style": ["error", "prefer-top-level"]
   }
 }

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -28,7 +28,9 @@ body:
       description: |
         Please provide the version of NextUI you are using.
         You can find the version number in the package.json file.
-      placeholder: ex. 2.0.10
+        For global installation, please state the version only. (e.g. 2.4.2)
+        For individual installation, please state the package name as well. (e.g. @nextui-org/button@2.0.34)
+      placeholder: ex. 2.4.2
     validations:
       required: true
   - type: textarea
@@ -103,6 +105,6 @@ body:
         - "Safari"
         - "Edge"
         - "Opera"
-        - "Other (add additonal context)"
+        - "Other (add additional context)"
     validations:
-      required: true
+      required: true

.github/common-actions/install/action.yml

@@ -5,12 +5,10 @@ runs:
   using: composite
   steps:
     - name: Install dependencies
-      uses: pnpm/action-setup@v2.2.4
-      with:
-        version: 8
+      uses: pnpm/action-setup@v4
 
     - name: Setup Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version-file: ".nvmrc"
         registry-url: "https://registry.npmjs.org"

.github/workflows/QA.yaml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install
         uses: ./.github/common-actions/install
@@ -24,7 +24,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install
         uses: ./.github/common-actions/install
@@ -37,7 +37,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install
         uses: ./.github/common-actions/install
@@ -50,7 +50,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install
         uses: ./.github/common-actions/install
@@ -63,7 +63,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install
         uses: ./.github/common-actions/install

.github/workflows/release.yaml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install
         uses: ./.github/common-actions/install

.github/workflows/sync-canary-to-main.yaml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0  # Ensure all history is fetched
 

.nvmrc

@@ -1 +1 @@
-16.x
+v20.16.0

.vscode/settings.json

@@ -3,5 +3,12 @@
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
-  }
+  },
+  "tailwindCSS.experimental.configFile": {
+    "packages/storybook/tailwind.config.js": ["packages/core/theme/**/*", "packages/components/**/*"],
+    "apps/docs/tailwind.config.js": "apps/docs/**/*"
+  },
+  "tailwindCSS.experimental.classRegex": [
+    ["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ]
 }

CONTRIBUTING.md

@@ -196,7 +196,7 @@ pnpm build
 npm run build
 ```
 
-> Note: ensure your version of Node is 16 or higher to run scripts
+> Note: ensure that you have at least Node.js 20.16.0 as well as pnpm 9.6.0 or higher installed on your machine to run the scripts
 
 6. Send your pull request:
 

apps/docs/.sponsorsrc

@@ -308,5 +308,25 @@
     "twitter": null,
     "github": null,
     "website": "https://encur.me/"
+  },
+  {
+    "MemberId": 571230,
+    "createdAt": "2024-06-01 18:47",
+    "type": "ORGANIZATION",
+    "role": "BACKER",
+    "tier": "Gold Sponsor 🥇",
+    "isActive": true,
+    "totalAmountDonated": 100,
+    "currency": "USD",
+    "lastTransactionAt": "2024-06-01 18:47",
+    "lastTransactionAmount": 100,
+    "profile": "https://opencollective.com/coderabbit",
+    "name": "CodeRabbit",
+    "company": null,
+    "description": "CodeRabbit is an AI-driven context-aware code reviewer that provides line-by-line feedback and smart chat. ",
+    "image": "/sponsors/571230.jpg",
+    "twitter": null,
+    "github": null,
+    "website": "https://coderabbit.ai"
   }
 ]

apps/docs/app/blog/layout.tsx

@@ -1,5 +1,7 @@
 import {Image} from "@nextui-org/react";
 
+import {ScriptProviders} from "@/components/scripts/script-providers";
+
 interface DocsLayoutProps {
   children: React.ReactNode;
 }
@@ -22,6 +24,8 @@ export default function DocsLayout({children}: DocsLayoutProps) {
       >
         <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
       </div>
+
+      <ScriptProviders />
     </>
   );
 }

apps/docs/app/docs/layout.tsx

@@ -2,6 +2,7 @@ import {Image} from "@nextui-org/react";
 
 import manifest from "@/config/routes.json";
 import {DocsSidebar} from "@/components/docs/sidebar";
+import {ScriptProviders} from "@/components/scripts/script-providers";
 
 interface DocsLayoutProps {
   children: React.ReactNode;
@@ -30,6 +31,8 @@ export default function DocsLayout({children}: DocsLayoutProps) {
       >
         <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
       </div>
+
+      <ScriptProviders />
     </>
   );
 }

apps/docs/app/examples/perf/page.tsx

@@ -246,7 +246,7 @@ const usersData = [
     age: "29",
     avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
     email: "brian.kim@example.com",
-    status: "Active",
+    status: "active",
   },
   {
     id: 7,

apps/docs/app/examples/table/custom-styles/page.tsx

@@ -112,7 +112,7 @@ const users = [
     age: "29",
     avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
     email: "brian.kim@example.com",
-    status: "Active",
+    status: "active",
   },
   {
     id: 7,

apps/docs/app/examples/table/use-case/page.tsx

@@ -112,7 +112,7 @@ const users = [
     age: "29",
     avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
     email: "brian.kim@example.com",
-    status: "Active",
+    status: "active",
   },
   {
     id: 7,

apps/docs/app/figma/page.tsx

@@ -2,6 +2,7 @@ import {Image} from "@nextui-org/react";
 
 import {Blockquote} from "@/components/docs/components/blockquote";
 import {FigmaButton} from "@/components/figma-button";
+import {ScriptProviders} from "@/components/scripts/script-providers";
 
 export default function FigmaPage() {
   return (
@@ -43,6 +44,8 @@ export default function FigmaPage() {
       >
         <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
       </div>
+
+      <ScriptProviders />
     </>
   );
 }

apps/docs/app/layout.tsx

@@ -12,7 +12,6 @@ import {fontSans} from "@/config/fonts";
 import {Navbar} from "@/components/navbar";
 import {Footer} from "@/components/footer";
 import {ProBanner} from "@/components/pro-banner";
-import {ScriptProviders} from "@/components/scripts/script-providers";
 
 export const metadata: Metadata = {
   title: {
@@ -77,7 +76,6 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
           </div>
           <Cmdk />
         </Providers>
-        <ScriptProviders />
       </body>
     </html>
   );

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

@@ -39,7 +39,7 @@ export type CodeBlockProps = PreProps & {
  * recursively get all text nodes as an array for a given element
  */
 function getTextNodes(node: any): any[] {
-  let childTextNodes = [];
+  let childTextNodes: React.ReactNode[] = [];
 
   if (!node.hasChildNodes()) return [];
 

apps/docs/components/docs/components/code-demo/code-demo.tsx

@@ -40,7 +40,6 @@ interface CodeDemoProps extends UseCodeDemoProps, WindowResizerProps {
   displayMode?: "always" | "visible";
   isGradientBox?: boolean;
   gradientColor?: GradientBoxProps["color"];
-  defaultExpanded?: boolean;
   previewHeight?: string | number;
   overflow?: "auto" | "visible" | "hidden";
   className?: string;
@@ -59,9 +58,8 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
   isPreviewCentered = false,
   // when false .js files will be used
   typescriptStrict = false,
-  showOpenInCodeSandbox,
+  showOpenInCodeSandbox = true,
   isGradientBox = false,
-  defaultExpanded = false,
   previewHeight = "auto",
   overflow = "visible",
   displayMode = "always",
@@ -138,11 +136,10 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
 
     const content = (
       <DynamicSandpack
-        defaultExpanded={defaultExpanded}
         files={files}
         highlightedLines={highlightedLines}
         showEditor={showEditor}
-        showOpenInCodeSandbox={showOpenInCodeSandbox || showPreview}
+        showOpenInCodeSandbox={showOpenInCodeSandbox}
         showPreview={showSandpackPreview}
         typescriptStrict={typescriptStrict}
       />
@@ -155,7 +152,6 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
     isInView,
     files,
     highlightedLines,
-    defaultExpanded,
     showPreview,
     showSandpackPreview,
     showOpenInCodeSandbox,

apps/docs/components/docs/components/package-managers.tsx

@@ -97,9 +97,9 @@ export const PackageManagers = ({
         })}
       </Tabs>
       {showGlobalInstallWarning && (
-        <Blockquote className="my-2">
-          No need to install this package if <Code>@nextui-org/react</Code> is already installed
-          globally.
+        <Blockquote className="my-2" color="warning">
+          The above command is for individual installation only. You may skip this step if{" "}
+          <Code>@nextui-org/react</Code> is already installed globally.
         </Blockquote>
       )}
     </>

apps/docs/components/footer.tsx

@@ -1,12 +1,9 @@
 "use client";
 
-import dynamic from "next/dynamic";
 import {usePathname} from "next/navigation";
 
 import {getCurrentYear} from "@/utils/time";
 
-const VercelCallout = dynamic(() => import("./vercel-callout").then((mod) => mod.VercelCallout));
-
 export const Footer = () => {
   const pathname = usePathname();
 
@@ -17,8 +14,9 @@ export const Footer = () => {
   return (
     <footer className="container mx-auto max-w-7xl pb-12 px-12">
       <div className="flex flex-col justify-center items-center gap-1">
-        <p className="text-sm text-default-400">© {getCurrentYear()} NextUI Inc.</p>
-        <VercelCallout />
+        <p className="text-sm text-default-400">
+          © {getCurrentYear()} NextUI Inc. All rights reserved.
+        </p>
       </div>
     </footer>
   );

apps/docs/components/icons/social.tsx

@@ -98,23 +98,6 @@ const NextJsIcon: React.FC<IconSvgProps> = ({size = 24, width, height, ...props}
     </svg>
   );
 };
-const VercelIcon: React.FC<IconSvgProps> = ({width, height = 44, ...props}) => {
-  return (
-    <svg
-      fill="none"
-      height={height}
-      viewBox="0 0 4438 1000"
-      width={width}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M2223.75 250C2051.25 250 1926.87 362.5 1926.87 531.25C1926.87 700 2066.72 812.5 2239.38 812.5C2343.59 812.5 2435.47 771.25 2492.34 701.719L2372.81 632.656C2341.25 667.188 2293.28 687.344 2239.38 687.344C2164.53 687.344 2100.94 648.281 2077.34 585.781H2515.16C2518.59 568.281 2520.63 550.156 2520.63 531.094C2520.63 362.5 2396.41 250 2223.75 250ZM2076.09 476.562C2095.62 414.219 2149.06 375 2223.75 375C2298.59 375 2352.03 414.219 2371.41 476.562H2076.09ZM2040.78 78.125L1607.81 828.125L1174.69 78.125H1337.03L1607.66 546.875L1878.28 78.125H2040.78ZM577.344 0L1154.69 1000H0L577.344 0ZM3148.75 531.25C3148.75 625 3210 687.5 3305 687.5C3369.38 687.5 3417.66 658.281 3442.5 610.625L3562.5 679.844C3512.81 762.656 3419.69 812.5 3305 812.5C3132.34 812.5 3008.13 700 3008.13 531.25C3008.13 362.5 3132.5 250 3305 250C3419.69 250 3512.66 299.844 3562.5 382.656L3442.5 451.875C3417.66 404.219 3369.38 375 3305 375C3210.16 375 3148.75 437.5 3148.75 531.25ZM4437.5 78.125V796.875H4296.88V78.125H4437.5ZM3906.25 250C3733.75 250 3609.38 362.5 3609.38 531.25C3609.38 700 3749.38 812.5 3921.88 812.5C4026.09 812.5 4117.97 771.25 4174.84 701.719L4055.31 632.656C4023.75 667.188 3975.78 687.344 3921.88 687.344C3847.03 687.344 3783.44 648.281 3759.84 585.781H4197.66C4201.09 568.281 4203.12 550.156 4203.12 531.094C4203.12 362.5 4078.91 250 3906.25 250ZM3758.59 476.562C3778.13 414.219 3831.41 375 3906.25 375C3981.09 375 4034.53 414.219 4053.91 476.562H3758.59ZM2961.25 265.625V417.031C2945.63 412.5 2929.06 409.375 2911.25 409.375C2820.47 409.375 2755 471.875 2755 565.625V796.875H2614.38V265.625H2755V409.375C2755 330 2847.34 265.625 2961.25 265.625Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
 
 const NpmIcon: React.FC<IconSvgProps> = ({width = "1em", height = "1em", ...props}) => {
   return (
@@ -477,7 +460,6 @@ export {
   OpenCollectiveIcon,
   PatreonIcon,
   NextJsIcon,
-  VercelIcon,
   NpmIcon,
   NpmSmallIcon,
   PnpmIcon,

apps/docs/components/index.ts

@@ -3,7 +3,6 @@ export * from "./theme-switch";
 export * from "./looper-bg";
 export * from "./code-window";
 export * from "./gradient-box";
-export * from "./vercel-callout";
 export * from "./copy-button";
 export * from "./demo-code-modal";
 export * from "./mdx-components";

apps/docs/components/marketing/a11y-otb.tsx

@@ -7,7 +7,6 @@ import {
   Link as NextUILink,
   Dropdown,
   DropdownSection,
-  DropdownTrigger,
   DropdownMenu,
   DropdownItem,
   Tooltip,
@@ -22,7 +21,7 @@ import {
 } from "@nextui-org/shared-icons";
 import Link from "next/link";
 import dynamic from "next/dynamic";
-import {useEffect, useRef, useState} from "react";
+import {Fragment, useEffect, useRef, useState} from "react";
 
 import {FeaturesGrid} from "./features-grid";
 
@@ -79,6 +78,8 @@ export const A11yOtb = () => {
 
   const ref = useRef<any>(null);
 
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
   const isMobile = useIsMobile();
 
   const isInView = useInView(ref, {
@@ -155,6 +156,15 @@ export const A11yOtb = () => {
                 <InfoBoldIcon className="rotate-180" />
               </Button>
             </Tooltip>
+            <Button
+              ref={triggerRef}
+              className="bg-success-50"
+              color="success"
+              variant="flat"
+              onPress={() => setIsDropdownOpen((prevOpenState) => !prevOpenState)}
+            >
+              {isMobile ? "Click me" : "Actions"}
+            </Button>
             {ref.current && (
               <Dropdown
                 className="shadow-xl"
@@ -164,13 +174,9 @@ export const A11yOtb = () => {
                 portalContainer={ref.current}
                 shouldBlockScroll={false}
                 shouldFlip={isMobile}
-                onOpenChange={(open) => setIsDropdownOpen(open)}
+                triggerRef={triggerRef}
               >
-                <DropdownTrigger>
-                  <Button className="bg-success-50" color="success" variant="flat">
-                    {isMobile ? "Click me" : "Actions"}
-                  </Button>
-                </DropdownTrigger>
+                <Fragment />
                 <DropdownMenu
                   aria-label="Actions"
                   closeOnSelect={true}

apps/docs/components/marketing/custom-themes/styles.ts

@@ -41,7 +41,7 @@ export const shopCartStyles = tv({
       "!ease-soft-spring",
       "!duration-300",
     ],
-    contentWrapper: "flex flex-col justify-center transition-all h-full h-[200px]",
+    contentWrapper: "flex flex-col justify-center transition-all h-full min-h-[200px]",
     title: ["relative", "w-full", "flex-none", "text-xl", "font-semibold", "text-foreground"],
     description: ["my-2", "w-full", "text-base", "text-default-500"],
     price: "relative text-lg font-semibold text-foreground",

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

@@ -50,7 +50,7 @@ export const FloatingComponents: React.FC<{}> = () => {
         />
 
         <Input
-          className="absolute -top-[130px] -right-[120px] animate-[levitate_10s_ease_infinite] w-[200px]"
+          className="absolute -top-[60px] -right-[80px] animate-[levitate_10s_ease_infinite] w-[200px]"
           color="secondary"
           defaultValue="NextUI"
           label="Input"
@@ -61,13 +61,13 @@ export const FloatingComponents: React.FC<{}> = () => {
 
         <Card
           isFooterBlurred
-          className="absolute -top-[260px] right-[100px] h-[120px] animate-[levitate_12s_ease_infinite_1s] z-0 max-w-fit"
+          className="absolute -top-[270px] right-[100px] h-[120px] animate-[levitate_12s_ease_infinite_1s] z-0 max-w-fit"
         >
           <Image
             alt="Professional camera"
             as={NextImage}
             className="object-cover -translate-y-12 h-[100%]"
-            height={120}
+            height={180}
             src="/images/card-example-6.webp"
             width={120}
           />
@@ -79,10 +79,10 @@ export const FloatingComponents: React.FC<{}> = () => {
 
         <FloatingTabs />
 
-        <UserTwitterCard className="absolute left-[80px] -top-[80px] animate-[levitate_16s_ease_infinite] border-none" />
+        <UserTwitterCard className="absolute left-[30px] -top-[80px] animate-[levitate_16s_ease_infinite] border-none" />
 
         <Card
-          className="absolute right-[110px] -top-[60px] animate-[levitate_18s_ease_infinite] z-10 max-w-fit border-none"
+          className="absolute right-[150px] -top-[50px] animate-[levitate_18s_ease_infinite] z-10 max-w-fit border-none"
           shadow="lg"
         >
           <CardBody>
@@ -90,7 +90,7 @@ export const FloatingComponents: React.FC<{}> = () => {
           </CardBody>
         </Card>
 
-        <div className="absolute z-10 -top-[40px] -right-[230px] animate-[levitate_14s_ease_infinite_1s]">
+        <div className="absolute z-10 -top-[120px] -right-[90px] animate-[levitate_14s_ease_infinite_1s]">
           <Pagination
             isCompact
             showControls

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

@@ -113,7 +113,7 @@ export const Hero = () => {
               });
             }}
           >
-            Github
+            GitHub
           </Button>
         </div>
       </div>

apps/docs/components/marketing/sponsors.tsx

@@ -1,23 +1,27 @@
 import {Button, Link} from "@nextui-org/react";
 
 import {sectionWrapper} from "@/components/primitives";
-import {Story2DesignLogo} from "@/components/icons/sponsors";
+import {Story2DesignLogo, CodeRabbitLogo, ScrumbuissLogo} from "@/components/icons/sponsors";
 import {HeartFilledIcon} from "@/components/icons";
-import {VercelIcon} from "@/components/icons/social";
 import {siteConfig} from "@/config/site";
 import {Sponsor, SponsorItem} from "@/components/marketing/sponsor-item";
 
 const sponsors: Sponsor[] = [
-  {
-    name: "Vercel",
-    href: "https://www.vercel.com?utm_source=nextui&utm_marketing=oss",
-    logo: <VercelIcon className="text-black dark:text-white" height={24} />,
-  },
   {
     name: "story.to.design",
     href: "https://story.to.design?utm_source=nextui&utm_marketing=partnership",
     logo: <Story2DesignLogo className="pt-1" />,
   },
+  {
+    name: "CodeRabbit",
+    href: "https://coderabbit.ai/?utm_source=nextui&utm_marketing=oss",
+    logo: <CodeRabbitLogo />,
+  },
+  {
+    name: "Scrumbuiss",
+    href: "https://www.scrumbuiss.com/?utm_source=nextui&utm_marketing=oss",
+    logo: <ScrumbuissLogo />,
+  },
 ];
 
 export const Sponsors = () => {

apps/docs/components/navbar.tsx

@@ -209,8 +209,8 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
               className={navLinkClasses}
               color="foreground"
               data-active={includes(pathname, "components")}
-              href="/docs/components/avatar"
-              onClick={() => handlePressNavbarItem("Components", "/docs/components/avatar")}
+              href="/docs/components/accordion"
+              onClick={() => handlePressNavbarItem("Components", "/docs/components/accordion")}
             >
               Components
             </NextLink>

apps/docs/components/sandpack/code-viewer.tsx

@@ -2,9 +2,6 @@ import type {SandpackInitMode} from "@codesandbox/sandpack-react";
 
 import * as React from "react";
 import {FileTabs, useSandpack, useActiveCode, SandpackStack} from "@codesandbox/sandpack-react";
-import {Button} from "@nextui-org/react";
-import scrollIntoView from "scroll-into-view-if-needed";
-import {clsx} from "@nextui-org/shared-utils";
 import {Language} from "prism-react-renderer";
 
 import {HighlightedLines} from "./types";
@@ -33,83 +30,42 @@ export interface CodeViewerProps {
   containerRef?: React.RefObject<HTMLDivElement>;
 }
 
-const INITIAL_HEIGHT = "200px";
-
 export const SandpackCodeViewer = React.forwardRef<any, CodeViewerProps>(
-  ({showTabs, code: propCode, defaultExpanded = false, highlightedLines, containerRef}, ref) => {
+  ({showTabs, code: propCode, highlightedLines, containerRef}, ref) => {
     const {sandpack} = useSandpack();
     const {code} = useActiveCode();
 
     const {activeFile} = sandpack;
 
-    const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
-
     // const id = React.useId();
     // hack to make sure we re-render the code editor and change current file
     // TODO: open an issue on sandpack-react
     // const [internalKey, setInternalKey] = React.useState(() => id);
-    const lineCountRef = React.useRef<{[key: string]: number}>({});
-
-    if (!lineCountRef.current[activeFile]) {
-      lineCountRef.current[activeFile] = code.split("\n").length;
-    }
 
     const shouldShowTabs = showTabs ?? sandpack.visibleFilesFromProps.length > 1;
 
-    const lineCount = lineCountRef.current[activeFile];
-    const isExpandable = lineCount > 7 || isExpanded;
     const fileExt = activeFile.split(".").pop() as Language;
 
     // const isAppFile = activeFile.includes("App");
 
-    React.useEffect(() => {
-      if (containerRef && containerRef?.current !== null && isExpandable) {
-        containerRef.current.style.height = INITIAL_HEIGHT;
-      }
-    }, [containerRef]);
-
     // React.useEffect(() => {
     //   setInternalKey(getId());
     // }, [propCode, code]);
 
     React.useEffect(() => {
-      if (defaultExpanded && containerRef && containerRef?.current !== null) {
-        const container = containerRef?.current;
+      if (containerRef && containerRef.current !== null) {
+        const container = containerRef.current;
 
         container.style.height = "auto";
       }
-    }, [defaultExpanded]);
-
-    const handleExpand = () => {
-      const nextIsExpanded = !isExpanded;
-
-      setIsExpanded(nextIsExpanded);
-      if (containerRef && containerRef?.current !== null) {
-        const container = containerRef?.current;
-
-        if (nextIsExpanded) {
-          container.style.height = "auto";
-        } else {
-          container.style.height = INITIAL_HEIGHT;
-          scrollIntoView(container, {
-            behavior: "smooth",
-            scrollMode: "if-needed",
-            block: "center",
-          });
-        }
-      }
-    };
+    }, []);
 
     return (
       <>
         <div className="h-full">
           <SandpackStack>
             {shouldShowTabs ? <FileTabs /> : null}
-            <div
-              className={clsx("sp-code-viewer max-h-[600px] overflow-y-scroll", {
-                "is-expanded": isExpanded,
-              })}
-            >
+            <div className="sp-code-viewer max-h-[600px] overflow-y-scroll">
               {/*
                * Disabled in favor of Codeblock due to performance issues & font size on ios 
                *   
@@ -127,7 +83,7 @@ export const SandpackCodeViewer = React.forwardRef<any, CodeViewerProps>(
               /> */}
               <Codeblock
                 ref={ref}
-                className={isExpandable ? "pb-16" : "pb-2"}
+                className="pb-2"
                 codeString={propCode || code}
                 language={fileExt}
                 metastring={highlightedLines && `{${highlightedLines}}`}
@@ -135,25 +91,6 @@ export const SandpackCodeViewer = React.forwardRef<any, CodeViewerProps>(
             </div>
           </SandpackStack>
         </div>
-        {isExpandable && (
-          <div
-            className={clsx(
-              "w-full absolute z-10 py-1 px-4 flex items-center justify-center bg-gradient-to-t from-code-background to-code-background/10 dark:to-code-background/50",
-              {"h-10 bottom-0 pb-2": isExpanded},
-              {"h-full inset-0": !isExpanded},
-            )}
-          >
-            <Button
-              className="bg-[#2a2838] shadow-md font-sans dark:bg-zinc-800 text-zinc-300 dark:text-zinc-400 hover:!text-zinc-200"
-              radius="full"
-              size="sm"
-              variant="flat"
-              onClick={handleExpand}
-            >
-              {isExpanded ? "Show less" : "Show more"}
-            </Button>
-          </div>
-        )}
       </>
     );
   },

apps/docs/components/sandpack/sandpack.tsx

@@ -17,7 +17,6 @@ export interface SandpackProps extends UseSandpackProps {
   showEditor?: boolean;
   showCopyCode?: boolean;
   showReportBug?: boolean;
-  defaultExpanded?: boolean;
   showOpenInCodeSandbox?: boolean;
   children?: React.ReactNode;
 }
@@ -29,7 +28,6 @@ export const Sandpack: FC<SandpackProps> = ({
   typescriptStrict = false,
   showPreview = false,
   showEditor = true,
-  defaultExpanded = false,
   showOpenInCodeSandbox = true,
   showReportBug = true,
   showCopyCode = true,
@@ -66,7 +64,6 @@ export const Sandpack: FC<SandpackProps> = ({
               <SandpackCodeViewer
                 containerRef={editorContainerRef}
                 decorators={decorators}
-                defaultExpanded={defaultExpanded}
                 highlightedLines={highlightedLines}
                 showTabs={showTabs}
               />

apps/docs/components/sandpack/use-sandpack.ts

@@ -100,13 +100,17 @@ export const useSandpack = ({
       let fileContent = files[key] as string;
 
       // Check if the file content includes 'React' import statements, if not, add it
-      if (!fileContent.includes("from 'react'") && !fileContent.includes('from "react"')) {
+      if (
+        fileContent.includes("React.") &&
+        !fileContent.includes("from 'react'") &&
+        !fileContent.includes('from "react"')
+      ) {
         fileContent = `${importReact}\n${fileContent}\n`;
       }
 
       // Check if file content includes any other dependencies, if yes, add it to dependencies
       const importRegex = /import .* from ["'](.*)["']/g;
-      let match;
+      let match: RegExpExecArray | null;
 
       while ((match = importRegex.exec(fileContent)) !== null) {
         const dependencyName = match[1];

apps/docs/components/sonar-pulse.tsx

@@ -41,7 +41,7 @@ export const SonarPulse: FC<SonarPulseProps> = ({
   }, [circlesCount, color]);
 
   const renderCircles = useMemo(() => {
-    const circles = [];
+    const circles: React.ReactNode[] = [];
 
     for (let i = 1; i < circlesCount; i++) {
       circles.push(

apps/docs/components/vercel-callout.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import React from "react";
-import {Link} from "@nextui-org/react";
-
-import {VercelIcon} from "@/components/icons";
-import {trackEvent} from "@/utils/va";
-
-export const VercelCallout: React.FC<unknown> = () => {
-  return (
-    <Link
-      isExternal
-      className="flex justify-end items-center gap-2 text-foreground"
-      href="https://www.vercel.com?utm_source=nextui&utm_marketing=oss"
-      onClick={() => {
-        trackEvent("VercelCallout", {
-          name: "vercel callout",
-          action: "click",
-          category: "footer",
-        });
-      }}
-    >
-      <p className="font-normal">Deployed on</p>
-      <VercelIcon className="text-black dark:text-white" height={18} />
-    </Link>
-  );
-};

apps/docs/config/routes.json

@@ -132,12 +132,6 @@
       "keywords": "interface elements, interactive components, UI components, widgets",
       "defaultOpen": true,
       "routes": [
-        {
-          "key": "avatar",
-          "title": "Avatar",
-          "keywords": "avatar, profile picture, user representation, identity",
-          "path": "/docs/components/avatar.mdx"
-        },
         {
           "key": "accordion",
           "title": "Accordion",
@@ -150,6 +144,12 @@
           "keywords": "autocomplete, auto suggest, search, typeahead",
           "path": "/docs/components/autocomplete.mdx"
         },
+        {
+          "key": "avatar",
+          "title": "Avatar",
+          "keywords": "avatar, profile picture, user representation, identity",
+          "path": "/docs/components/avatar.mdx"
+        },
         {
           "key": "badge",
           "title": "Badge",
@@ -157,6 +157,12 @@
           "path": "/docs/components/badge.mdx",
           "updated": true
         },
+        {
+          "key": "breadcrumbs",
+          "title": "Breadcrumbs",
+          "keywords": "breadcrumbs, navigation, path, trail, location",
+          "path": "/docs/components/breadcrumbs.mdx"
+        },
         {
           "key": "button",
           "title": "Button",
@@ -164,10 +170,11 @@
           "path": "/docs/components/button.mdx"
         },
         {
-          "key": "breadcrumbs",
-          "title": "Breadcrumbs",
-          "keywords": "breadcrumbs, navigation, path, trail, location",
-          "path": "/docs/components/breadcrumbs.mdx"
+          "key": "calendar",
+          "title": "Calendar",
+          "keywords": "calendar, date picker, month picker, year picker",
+          "path": "/docs/components/calendar.mdx",
+          "newPost": true
         },
         {
           "key": "card",
@@ -194,32 +201,6 @@
           "keywords": "chip, tag, label, small actionable entity",
           "path": "/docs/components/chip.mdx"
         },
-        {
-          "key": "code",
-          "title": "Code",
-          "keywords": "code, code snippet, inline code, coding",
-          "path": "/docs/components/code.mdx"
-        },
-        {
-          "key": "input",
-          "title": "Input",
-          "keywords": "input, text box, form field, data entry",
-          "path": "/docs/components/input.mdx"
-        },
-        {
-          "key": "date-input",
-          "title": "Date Input",
-          "keywords": "date-input, time, input, timezone",
-          "path": "/docs/components/date-input.mdx",
-          "newPost": true
-        },
-        {
-          "key": "time-input",
-          "title": "Time Input",
-          "keywords": "timeinput, time, input, timezone",
-          "path": "/docs/components/time-input.mdx",
-          "newPost": true
-        },
         {
           "key": "circular-progress",
           "title": "Circular Progress",
@@ -227,17 +208,16 @@
           "path": "/docs/components/circular-progress.mdx"
         },
         {
-          "key": "calendar",
-          "title": "Calendar",
-          "keywords": "calendar, date picker, month picker, year picker",
-          "path": "/docs/components/calendar.mdx",
-          "newPost": true
+          "key": "code",
+          "title": "Code",
+          "keywords": "code, code snippet, inline code, coding",
+          "path": "/docs/components/code.mdx"
         },
         {
-          "key": "range-calendar",
-          "title": "Range Calendar",
-          "keywords": "range calendar, date picker, month picker, year picker",
-          "path": "/docs/components/range-calendar.mdx",
+          "key": "date-input",
+          "title": "Date Input",
+          "keywords": "date-input, time, input, timezone",
+          "path": "/docs/components/date-input.mdx",
           "newPost": true
         },
         {
@@ -272,6 +252,12 @@
           "keywords": "image, media, picture, photo, graphic display",
           "path": "/docs/components/image.mdx"
         },
+        {
+          "key": "input",
+          "title": "Input",
+          "keywords": "input, text box, form field, data entry",
+          "path": "/docs/components/input.mdx"
+        },
         {
           "key": "kbd",
           "title": "Kbd",
@@ -326,6 +312,19 @@
           "keywords": "radio group, selection set, option selection, exclusive choices",
           "path": "/docs/components/radio-group.mdx"
         },
+        {
+          "key": "range-calendar",
+          "title": "Range Calendar",
+          "keywords": "range calendar, date picker, month picker, year picker",
+          "path": "/docs/components/range-calendar.mdx",
+          "newPost": true
+        },
+        {
+          "key": "scroll-shadow",
+          "title": "Scroll Shadow",
+          "keywords": "scroll shadow, scroll indicator, scroll bar, scroll position",
+          "path": "/docs/components/scroll-shadow.mdx"
+        },
         {
           "key": "select",
           "title": "Select",
@@ -339,18 +338,18 @@
           "path": "/docs/components/skeleton.mdx",
           "updated": true
         },
+        {
+          "key": "slider",
+          "title": "Slider",
+          "keywords": "slider, range input, value selector, sliding control",
+          "path": "/docs/components/slider.mdx"
+        },
         {
           "key": "snippet",
           "title": "Snippet",
           "keywords": "snippet, code block, programming, code example",
           "path": "/docs/components/snippet.mdx"
         },
-        {
-          "key": "scroll-shadow",
-          "title": "Scroll Shadow",
-          "keywords": "scroll shadow, scroll indicator, scroll bar, scroll position",
-          "path": "/docs/components/scroll-shadow.mdx"
-        },
         {
           "key": "spacer",
           "title": "Spacer",
@@ -369,12 +368,6 @@
           "keywords": "switch, toggle, binary input, on/off control",
           "path": "/docs/components/switch.mdx"
         },
-        {
-          "key": "slider",
-          "title": "Slider",
-          "keywords": "slider, range input, value selector, sliding control",
-          "path": "/docs/components/slider.mdx"
-        },
         {
           "key": "table",
           "title": "Table",
@@ -394,6 +387,13 @@
           "keywords": "textarea, multi-line text input, large text field, form control",
           "path": "/docs/components/textarea.mdx"
         },
+        {
+          "key": "time-input",
+          "title": "Time Input",
+          "keywords": "timeinput, time, input, timezone",
+          "path": "/docs/components/time-input.mdx",
+          "newPost": true
+        },
         {
           "key": "tooltip",
           "title": "Tooltip",

apps/docs/content/blog/nextui-v2.mdx

@@ -60,7 +60,11 @@ into React Server Components issues.
 NextUI v2.0 comes with a TailwindCSS plugin that enables the customization and addition of default themes.
 This plugin allows you to customize colors and layouts tokens that are used by NextUI components.
 
-```js {8,13-14}
+<Blockquote color="primary">
+**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules`
+</Blockquote>
+
+```js {9,14-15}
 // tailwind.config.js
 const {nextui} = require("@nextui-org/react");
 
@@ -68,6 +72,7 @@ const {nextui} = require("@nextui-org/react");
 module.exports = {
   content: [
     // ...
+    // make sure it's pointing to the ROOT node_module
     "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {

apps/docs/content/components/autocomplete/custom-empty-content-message.ts

@@ -0,0 +1,57 @@
+const data = `export const animals = [
+  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", value: "elephant", description: "The largest land animal"},
+  {label: "Lion", value: "lion", description: "The king of the jungle"},
+  {label: "Tiger", value: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    value: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    value: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    value: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+];`;
+
+const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+import {animals} from "./data";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Autocomplete
+        label="Favorite Animal"
+        placeholder="Search an animal"
+        className="max-w-xs"
+        defaultItems={animals}
+        listboxProps={{
+            emptyContent: 'Your own empty content text.'
+        }}
+      >
+        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      </Autocomplete>
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/data.js": data,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/autocomplete/custom-items.ts

@@ -57,7 +57,7 @@ const data = `export const users = [
     age: "29",
     avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
     email: "brian.kim@example.com",
-    status: "Active",
+    status: "active",
   },
   {
     id: 7,

apps/docs/content/components/autocomplete/custom-styles.ts

@@ -57,7 +57,7 @@ const data = `export const users = [
     age: "29",
     avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
     email: "brian.kim@example.com",
-    status: "Active",
+    status: "active",
   },
   {
     id: 7,

apps/docs/content/components/autocomplete/index.ts

@@ -24,6 +24,7 @@ import asyncLoadingItems from "./async-loading-items";
 import sections from "./sections";
 import customSectionsStyle from "./custom-sections-style";
 import customStyles from "./custom-styles";
+import customEmptyContentMessage from "./custom-empty-content-message";
 import readOnly from "./read-only";
 
 export const autocompleteContent = {
@@ -53,5 +54,6 @@ export const autocompleteContent = {
   sections,
   customSectionsStyle,
   customStyles,
+  customEmptyContentMessage,
   readOnly,
 };

apps/docs/content/components/button/custom-impl.ts

@@ -61,7 +61,7 @@ const MyButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     ...props,
   });
 
-  const {ripples} = getRippleProps();
+  const {ripples, onClear} = getRippleProps();
 
   return (
     <button ref={domRef} {...getButtonProps()}>
@@ -70,7 +70,7 @@ const MyButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
       {children}
       {isLoading && spinnerPlacement === "end" && spinner}
       {endContent}
-      {!disableRipple && <Ripple ripples={ripples} />}
+      {!disableRipple && <Ripple ripples={ripples} onClear={onClear} />}
     </button>
   );
 });

apps/docs/content/components/date-range-picker/custom-styles.ts

@@ -0,0 +1,41 @@
+const App = `import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <DateRangePicker
+        calendarProps={{
+          classNames: {
+            base: "bg-background",
+            headerWrapper: "pt-4 bg-background",
+            prevButton: "border-1 border-default-200 rounded-small",
+            nextButton: "border-1 border-default-200 rounded-small",
+            gridHeader: "bg-background shadow-none border-b-1 border-default-100",
+            cellButton: [
+              "data-[today=true]:bg-default-100 data-[selected=true]:bg-transparent rounded-small",
+              // start (pseudo)
+              "data-[range-start=true]:before:rounded-l-small",
+              "data-[selection-start=true]:before:rounded-l-small",
+              // end (pseudo)
+              "data-[range-end=true]:before:rounded-r-small",
+              "data-[selection-end=true]:before:rounded-r-small",
+              // start (selected)
+              "data-[selected=true]:data-[selection-start=true]:data-[range-selection=true]:rounded-small",
+              // end (selected)
+              "data-[selected=true]:data-[selection-end=true]:data-[range-selection=true]:rounded-small",
+            ],
+          },
+      }}
+      className="max-w-xs"
+      label="Stay duration"
+      variant="bordered"
+    />
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/date-range-picker/index.ts

@@ -19,6 +19,7 @@ import visibleMonth from "./visible-month";
 import pageBehavior from "./page-behavior";
 import nonContigous from "./non-contiguous";
 import presets from "./presets";
+import customStyles from "./custom-styles";
 
 export const dateRangePickerContent = {
   usage,
@@ -42,4 +43,5 @@ export const dateRangePickerContent = {
   pageBehavior,
   nonContigous,
   presets,
+  customStyles,
 };

apps/docs/content/components/date-range-picker/presets.ts

@@ -88,7 +88,7 @@ export default function App() {
           </ButtonGroup>
         }
         calendarProps={{
-          focusedValue: value.start,
+          focusedValue: value?.start,
           onFocusChange: (val) => setValue({...value, start: val}),
           nextButtonProps: {
             variant: "bordered",

apps/docs/content/components/dropdown/multiple-selection.ts

@@ -37,8 +37,49 @@ export default function App() {
   );
 }`;
 
+const AppTs = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
+import type { Selection } from "@nextui-org/react";
+
+export default function App() {
+  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(["text"]));
+
+  const selectedValue = React.useMemo(
+    () => Array.from(selectedKeys).join(", ").replaceAll("_", " "),
+    [selectedKeys]
+  );
+
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <Button 
+          variant="bordered" 
+          className="capitalize"
+        >
+          {selectedValue}
+        </Button>
+      </DropdownTrigger>
+      <DropdownMenu 
+        aria-label="Multiple selection example"
+        variant="flat"
+        closeOnSelect={false}
+        disallowEmptySelection
+        selectionMode="multiple"
+        selectedKeys={selectedKeys}
+        onSelectionChange={setSelectedKeys}
+      >
+        <DropdownItem key="text">Text</DropdownItem>
+        <DropdownItem key="number">Number</DropdownItem>
+        <DropdownItem key="date">Date</DropdownItem>
+        <DropdownItem key="single_date">Single Date</DropdownItem>
+        <DropdownItem key="iteration">Iteration</DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  );
+}`;
+
 const react = {
   "/App.jsx": App,
+  "/App.tsx": AppTs,
 };
 
 export default {

apps/docs/content/components/dropdown/single-selection.ts

@@ -36,8 +36,48 @@ export default function App() {
   );
 }`;
 
+const AppTs = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
+import type { Selection } from "@nextui-org/react";
+
+export default function App() {
+  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(["text"]));
+
+  const selectedValue = React.useMemo(
+    () => Array.from(selectedKeys).join(", ").replaceAll("_", " "),
+    [selectedKeys]
+  );
+
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <Button 
+          variant="bordered" 
+          className="capitalize"
+        >
+          {selectedValue}
+        </Button>
+      </DropdownTrigger>
+      <DropdownMenu 
+        aria-label="Single selection example"
+        variant="flat"
+        disallowEmptySelection
+        selectionMode="single"
+        selectedKeys={selectedKeys}
+        onSelectionChange={setSelectedKeys}
+      >
+        <DropdownItem key="text">Text</DropdownItem>
+        <DropdownItem key="number">Number</DropdownItem>
+        <DropdownItem key="date">Date</DropdownItem>
+        <DropdownItem key="single_date">Single Date</DropdownItem>
+        <DropdownItem key="iteration">Iteration</DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  );
+}`;
+
 const react = {
   "/App.jsx": App,
+  "/App.tsx": AppTs,
 };
 
 export default {

apps/docs/content/components/input/password.ts

@@ -69,7 +69,7 @@ export default function App() {
       variant="bordered"
       placeholder="Enter your password"
       endContent={
-        <button className="focus:outline-none" type="button" onClick={toggleVisibility}>
+        <button className="focus:outline-none" type="button" onClick={toggleVisibility} aria-label="toggle password visibility">
           {isVisible ? (
             <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
           ) : (

apps/docs/content/components/listbox/top-content.ts

@@ -57,7 +57,7 @@ const data = `export const users = [
     age: "29",
     avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
     email: "brian.kim@example.com",
-    status: "Active",
+    status: "active",
   },
   {
     id: 7,

apps/docs/content/components/pagination/custom-items.ts

@@ -59,7 +59,7 @@ export default function App() {
     onPrevious,
     setPage,
     className,
-  }: PaginationItemRenderProps<HTMLButtonElement>) => {
+  }: PaginationItemRenderProps) => {
     if (value === PaginationItemType.NEXT) {
       return (
         <button key={key} className={cn(className, "bg-default-200/50 min-w-8 w-8 h-8")} onClick={onNext}>

apps/docs/content/components/select/custom-items.ts

@@ -57,7 +57,7 @@ const data = `export const users = [
     age: "29",
     avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
     email: "brian.kim@example.com",
-    status: "Active",
+    status: "active",
   },
   {
     id: 7,

apps/docs/content/components/select/custom-render-value.ts

@@ -57,7 +57,7 @@ const data = `export const users = [
     age: "29",
     avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
     email: "brian.kim@example.com",
-    status: "Active",
+    status: "active",
   },
   {
     id: 7,

apps/docs/content/components/select/custom-styles.ts

@@ -57,7 +57,7 @@ const data = `export const users = [
     age: "29",
     avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
     email: "brian.kim@example.com",
-    status: "Active",
+    status: "active",
   },
   {
     id: 7,

apps/docs/content/components/select/multiple-chips.ts

@@ -57,7 +57,7 @@ const data = `export const users = [
     age: "29",
     avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
     email: "brian.kim@example.com",
-    status: "Active",
+    status: "active",
   },
   {
     id: 7,

apps/docs/content/components/table/async-pagination.ts

@@ -12,7 +12,7 @@ export default function App() {
 
   const rowsPerPage = 10;
 
-  const pages = useMemo(() => {
+  const pages = React.useMemo(() => {
     return data?.count ? Math.ceil(data.count / rowsPerPage) : 0;
   }, [data?.count, rowsPerPage]);
 
@@ -36,7 +36,6 @@ export default function App() {
           </div>
         ) : null
       }
-      {...args}
     >
       <TableHeader>
         <TableColumn key="name">Name</TableColumn>

apps/docs/content/components/table/custom-styles.ts

@@ -74,7 +74,7 @@ const users = [
     age: "29",
     avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
     email: "brian.kim@example.com",
-    status: "Active",
+    status: "active",
   },
   {
     id: 7,

apps/docs/content/components/table/infinite-pagination.ts

@@ -67,10 +67,98 @@ export default function App() {
   );
 }`;
 
+const AppTs = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Pagination, Spinner, getKeyValue} from "@nextui-org/react";
+import { useInfiniteScroll } from "@nextui-org/use-infinite-scroll";
+import { useAsyncList } from "@react-stately/data";
+
+interface SWCharacter {
+  name: string;
+  height: string;
+  mass: string;
+  birth_year: string;
+}
+
+export default function App() {
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
+  const [hasMore, setHasMore] = React.useState<boolean>(false);
+
+  let list = useAsyncList<SWCharacter>({
+    async load({ signal, cursor }) {
+      if (cursor) {
+        setIsLoading(false);
+      }
+
+      // If no cursor is available, then we're loading the first page.
+      // Otherwise, the cursor is the next URL to load, as returned from the previous page.
+      const res = await fetch(
+        cursor || "https://swapi.py4e.com/api/people/?search=",
+        { signal }
+      );
+      let json = await res.json();
+
+      setHasMore(json.next !== null);
+
+      return {
+        items: json.results,
+        cursor: json.next,
+      };
+    },
+  });
+
+  const [loaderRef, scrollerRef] = useInfiniteScroll({
+    hasMore,
+    onLoadMore: list.loadMore,
+  });
+
+  return (
+    <Table
+      isHeaderSticky
+      aria-label="Example table with infinite pagination"
+      baseRef={scrollerRef}
+      bottomContent={
+        hasMore ? (
+          <div className="flex w-full justify-center">
+            <Spinner ref={loaderRef} color="white" />
+          </div>
+        ) : null
+      }
+      classNames={{
+        base: "max-h-[520px] overflow-scroll",
+        table: "min-h-[400px]",
+      }}
+    >
+      <TableHeader>
+        <TableColumn key="name">Name</TableColumn>
+        <TableColumn key="height">Height</TableColumn>
+        <TableColumn key="mass">Mass</TableColumn>
+        <TableColumn key="birth_year">Birth year</TableColumn>
+      </TableHeader>
+      <TableBody
+        isLoading={isLoading}
+        items={list.items}
+        loadingContent={<Spinner color="white" />}
+      >
+        {(item: SWCharacter) => (
+          <TableRow key={item.name}>
+            {(columnKey) => (
+              <TableCell>{getKeyValue(item, columnKey)}</TableCell>
+            )}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}`;
+
 const react = {
   "/App.jsx": App,
 };
 
+const reactTs = {
+  "/App.tsx": AppTs,
+};
+
 export default {
   ...react,
+  ...reactTs,
 };

apps/docs/content/components/table/use-case.ts

@@ -74,7 +74,7 @@ const users = [
     age: "29",
     avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
     email: "brian.kim@example.com",
-    status: "Active",
+    status: "active",
   },
   {
     id: 7,

apps/docs/content/docs/components/accordion.mdx

@@ -151,7 +151,7 @@ Here's an example of how to customize the accordion styles:
 
 <CodeDemo title="Custom Accordion Styles" files={accordionContent.customStyles} />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -172,7 +172,7 @@ Here's an example of how to customize the accordion styles:
 - **data-pressed**:
   When the accordion item is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html).
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -182,7 +182,7 @@ Here's an example of how to customize the accordion styles:
 - `aria-disabled` attribute for the accordion item.
 - `aria-controls` attribute for the accordion item.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

apps/docs/content/docs/components/autocomplete.mdx

@@ -226,6 +226,7 @@ import {useFilter} from "@react-aria/i18n";
 <CodeDemo
   title="Fully Controlled"
   showPreview={false}
+  showOpenInCodeSandbox={false}
   highlightedLines="63-64,67,69-71"
   files={autocompleteContent.fullyControlled}
 />
@@ -238,6 +239,12 @@ You can customize the autocomplete items by modifying the `AutocompleteItem` chi
 
 <CodeDemo title="Custom Items" files={autocompleteContent.customItems} />
 
+### Custom Empty Content Message
+
+By default, a message `No results found.` will be shown if there is no result matching a query with your filter. You can customize the empty content message by modifying the `emptyContent` in `listboxProps`.
+
+<CodeDemo title="Custom Empty Content Message" files={autocompleteContent.customEmptyContentMessage} />
+
 ### Custom Filtering
 
 By default, `Autocomplete` uses a `"contains"` function from [useFilter](https://react-spectrum.adobe.com/react-aria/useFilter.html) to filter the
@@ -275,6 +282,7 @@ import {useAsyncList} from "@react-stately/data";
   typescriptStrict={true}
   title="Asynchronous Filtering"
   showPreview={false}
+  showOpenInCodeSandbox={false}
   highlightedLines="27-29,33"
   files={autocompleteContent.asyncFiltering}
 />
@@ -301,6 +309,7 @@ import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
 
 <CodeDemo
   showPreview={false}
+  showOpenInCodeSandbox={false}
   typescriptStrict={true}
   title="Asynchronous Loading"
   highlightedLines="21-22,25,27"

apps/docs/content/docs/components/avatar.mdx

@@ -14,8 +14,6 @@ The Avatar component is used to represent a user, and displays the profile pictu
 
 ---
 
-
-
 ## Installation
 
 <PackageManagers
@@ -90,7 +88,8 @@ You can also provide a custom fallback component to be displayed when the `src`
 
 In case you need to customize the avatar even further, you can use the `useAvatar` hook to create your own implementation.
 
-<CodeDemo showPreview={false} title="Custom implementation" files={avatarContent.customImpl} />
+<CodeDemo showPreview={false} showOpenInCodeSandbox={false} title="Custom implementation" files={avatarContent.customImpl} />
+  
 
 ### Custom initials logic
 
@@ -134,7 +133,7 @@ By passing the `isGrid` prop to the `AvatarGroup` component, the avatars will be
 In case you need to customize the avatar group even further, you can use the `useAvatarGroup` hook and the
 `AvatarGroupProvider` to create your own implementation.
 
-<CodeDemo showPreview={false} title="Custom implementation" files={avatarContent.groupCustomImpl} />
+<CodeDemo showPreview={false} showOpenInCodeSandbox={false} title="Custom implementation" files={avatarContent.groupCustomImpl} />
 
 ## Slots
 
@@ -150,7 +149,7 @@ You can customize any part of the avatar by using the `classNames` prop, each `s
 
 <CodeDemo title="Custom Avatar" files={avatarContent.custom} />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -163,7 +162,7 @@ You can customize any part of the avatar by using the `classNames` prop, each `s
 - **data-focus-visible**:
   When the avatar is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html), it is applied when `isFocusable` is `true` or when the `as` property is assigned as `button`.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

apps/docs/content/docs/components/badge.mdx

@@ -89,6 +89,16 @@ Instead, consider supplying a comprehensive description, such as using `aria-lab
 
 <Spacer y={4} />
 
+## Slots
+
+The Badge component has two slots:
+
+- **base**: The base slot for the badge, which is the container of the badge.
+
+- **badge**: The main slot for the badge content, which is the content of the badge.
+
+<Spacer y={4} />
+
 ## API
 
 ### Badge Props

apps/docs/content/docs/components/button.mdx

@@ -101,7 +101,7 @@ You can customize the `Button` component by passing custom Tailwind CSS classes
 
 You can also use the `useButton` hook to create your own button component.
 
-<CodeDemo showPreview={false} title="Custom Implementation" files={buttonContent.customImpl} />
+<CodeDemo showPreview={false} showOpenInCodeSandbox={false} title="Custom Implementation" files={buttonContent.customImpl} />
 
 ## Button Group
 

apps/docs/content/docs/components/card.mdx

@@ -93,6 +93,19 @@ You can use `Image` component as the cover of the card by taking it out of the `
 
 <Spacer y={4} />
 
+## Slots
+
+- **base**:
+  The main container of the card, where the header, body, and footer are placed.
+- **header**:
+  The header of the card, usually used for the title.
+- **body**:
+  The body of the card, where the main content is placed.
+- **footer**:
+  The footer of the card, usually used for actions.
+
+<Spacer y={4} />
+
 ## Data Attributes
 
 `Card` has the following attributes on the `base` element:

apps/docs/content/docs/components/checkbox.mdx

@@ -127,7 +127,7 @@ In case you need to customize the checkbox even further, you can use the `useChe
 - **data-loading**:
   When the checkbox is loading. Based on `isLoading` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 

apps/docs/content/docs/components/chip.mdx

@@ -93,7 +93,7 @@ You can customize the `Chip` component by passing custom Tailwind CSS classes to
 
 <CodeDemo title="Custom Styles" files={chipContent.customStyles} />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

apps/docs/content/docs/components/circular-progress.mdx

@@ -92,7 +92,7 @@ You can customize the `CircularProgress` component by passing custom Tailwind CS
   highlightedLines="9-12"
 />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -103,7 +103,7 @@ You can customize the `CircularProgress` component by passing custom Tailwind CS
 - **data-disabled**:
   Indicates whether the progress is disabled. Based on `isDisabled` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -113,7 +113,7 @@ You can customize the `CircularProgress` component by passing custom Tailwind CS
 - Determinate and indeterminate progress support.
 - Exposes the `aria-valuenow`, `aria-valuemin`, `aria-valuemax` and `aria-valuetext` attributes.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

apps/docs/content/docs/components/code.mdx

@@ -50,7 +50,7 @@ Code is a component used to display inline code.
 
 <CodeDemo title="Colors" files={codeContent.colors} />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

apps/docs/content/docs/components/date-input.mdx

@@ -247,7 +247,7 @@ import {parseZonedDateTime} from "@internationalized/date";
 - **description**: The description of the date-input.
 - **errorMessage**: The error message of the date-input.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 

apps/docs/content/docs/components/date-picker.mdx

@@ -270,7 +270,7 @@ import {I18nProvider} from "@react-aria/i18n";
 - **timeInputLabel**: The time-input component's label element.
 - **timeInput**: The time-input component element.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -289,7 +289,7 @@ import {I18nProvider} from "@react-aria/i18n";
 - **data-disabled**:
   When the date-picker is disabled. Based on `isDisabled` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -299,7 +299,7 @@ import {I18nProvider} from "@react-aria/i18n";
 - Date segments are editable using an easy to use numeric keypad, and all interactions are accessible using touch-based screen readers.
 - Integrates with HTML forms, supporting required, minimum and maximum values, unavailable dates, custom validation functions, realtime validation, and server-side validation errors
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

apps/docs/content/docs/components/date-range-picker.mdx

@@ -302,6 +302,12 @@ import {useLocale, useDateFormatter} from "@react-aria/i18n";
 - **description**: The description of the date-input.
 - **errorMessage**: The error message of the date-input.
 
+### Custom Styles
+
+You can customize the `DateRangePicker` component by passing custom Tailwind CSS classes to the component slots.
+
+<CodeDemo title="Custom Styles" files={dateRangePickerContent.customStyles} />
+
 <Spacer y={4} />
 
 ## Data Attributes

apps/docs/content/docs/components/dropdown.mdx

@@ -97,7 +97,6 @@ You can set the `selectionMode` property as `single` to allow the user to select
 
 <CodeDemo
   title="Single Selection"
-  highlightedLines="26-28"
   files={dropdownContent.singleSelection}
 />
 
@@ -107,7 +106,6 @@ You can set the `selectionMode` property as `multiple` to allow the user to sele
 
 <CodeDemo
   title="Multiple Selection"
-  highlightedLines="26-28"
   files={dropdownContent.multipleSelection}
 />
 
@@ -322,9 +320,9 @@ you to customize each item individually.
 | variant                | `solid` \| `bordered` \| `light` \| `flat` \| `faded` \| `shadow`                                      | The dropdown items appearance style.                                                                    | `solid`     |
 | color                  | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                            | The dropdown items color theme.                                                                         | `default`   |
 | selectionMode          | `none` \| `single` \| `multiple`                                                                       | The type of selection that is allowed in the collection.                                                | -           |
-| selectedKeys           | `React.Key[]`                                                                                          | The currently selected keys in the collection (controlled).                                             | -           |
-| disabledKeys           | `React.Key[]`                                                                                          | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. | -           |
-| defaultSelectedKeys    | `all` \| `React.Key[]`                                                                                 | The initial selected keys in the collection (uncontrolled).                                             | -           |
+| selectedKeys           | `all` \| `Iterable<React.Key>`                                                                                          | The currently selected keys in the collection (controlled).                                             | -           |
+| disabledKeys           | `Iterable<React.Key>`                                                                                          | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. | -           |
+| defaultSelectedKeys    | `all` \| `Iterable<React.Key>`                                                                                 | The initial selected keys in the collection (uncontrolled).                                             | -           |
 | disallowEmptySelection | `boolean`                                                                                              | Whether the collection allows empty selection.                                                          | `false`     |
 | autoFocus              | `boolean` \| `first` \| `last`                                                                         | Where the focus should be set.                                                                          | `false`     |
 | topContent             | `ReactNode`                                                                                            | The content to display above the listbox items.                                                         | -           |
@@ -343,7 +341,7 @@ you to customize each item individually.
 | Attribute         | Type                          | Description                                                                |
 | ----------------- | ----------------------------- | -------------------------------------------------------------------------- |
 | onAction          | `(key: React.Key) => void`    | Handler that is called when an item is selected.                           |
-| onSelectionChange | `(keys: React.Key[]) => void` | Handler that is called when the selection changes.                         |
+| onSelectionChange | `(keys: "all" \| Set<React.Key> & {anchorKey?: string; currentKey?: string}) => void` | Handler that is called when the selection changes.                         |
 | onClose           | `() => void`                  | Handler that is called when the menu should close after selecting an item. |
 
 ---

apps/docs/content/docs/components/image.mdx

@@ -79,7 +79,7 @@ You can use the `fallbackSrc` prop to display a fallback image when:
 Next.js provides an optimized [Image](https://nextjs.org/docs/app/api-reference/components/image) component,
 you can use it with NextUI `Image` component as well.
 
-<CodeDemo showPreview={false} title="With Next.js Image" files={imageContent.nextjs} />
+<CodeDemo showPreview={false} showOpenInCodeSandbox={false} title="With Next.js Image" files={imageContent.nextjs} />
 
 > **Note**: NextUI's `Image` component is `client-side`, using hooks like `useState` for loading states
 > and animations. Use Next.js `Image` alone if these features aren't required.

apps/docs/content/docs/components/input.mdx

@@ -85,14 +85,14 @@ You can change the position of the label by setting the `labelPlacement` propert
 
 You can use the `type` property to change the input type to `password`.
 
-<CodeDemo title="Password Input" highlightedLines="24" files={inputContent.password} />
+<CodeDemo title="Password Input" highlightedLines="25" files={inputContent.password} />
 
 ### Clear Button
 
 If you pass the `isClearable` property to the input, it will have a clear button at the
 end of the input, it will be visible when the input has a value.
 
-<CodeDemo title="Clear Button" highlightedLines="6" files={inputContent.clearButton} />
+<CodeDemo title="Clear Button" highlightedLines="7" files={inputContent.clearButton} />
 
 ### Start & End Content
 
@@ -142,7 +142,7 @@ You can use the `value` and `onValueChange` properties to control the input valu
 
 You can customize the `Input` component by passing custom Tailwind CSS classes to the component slots.
 
-<CodeDemo title="Custom Styles" highlightedLines="14-32" files={inputContent.customStyles} />
+<CodeDemo title="Custom Styles" highlightedLines="13-31" files={inputContent.customStyles} />
 
 ### Custom Implementation
 
@@ -155,7 +155,7 @@ In case you need to customize the input even further, you can use the `useInput`
   files={inputContent.customImpl}
 />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -178,7 +178,7 @@ In case you need to customize the input even further, you can use the `useInput`
 - **data-disabled**:
   When the input is disabled. Based on `isDisabled` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -188,7 +188,7 @@ In case you need to customize the input even further, you can use the `useInput`
 - Required and invalid states exposed to assistive technology via ARIA.
 - Support for description and error message help text linked to the input via ARIA.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

apps/docs/content/docs/components/link.mdx

@@ -102,9 +102,9 @@ function App() {
 
 In case you need to customize the link even further, you can use the `useLink` hook to create your own implementation.
 
-<CodeDemo showPreview={false} title="Custom implementation" files={linkContent.customImpl} />
+<CodeDemo showPreview={false} showOpenInCodeSandbox={false} title="Custom implementation" files={linkContent.customImpl} />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -117,7 +117,7 @@ In case you need to customize the link even further, you can use the `useLink` h
 - **data-disabled**:
   When the link is disabled. Based on `isDisabled` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -126,7 +126,7 @@ In case you need to customize the link even further, you can use the `useLink` h
 - Support for disabled links.
 - Keyboard users may activate links using the <Kbd>Enter</Kbd> key.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

apps/docs/content/docs/components/pagination.mdx

@@ -126,7 +126,7 @@ You can use the `renderItem` property to customize the pagination items.
 - **prev**: The previous button slot.
 - **next**: The next button slot.
 - **item**: The pagination item slot, applied to the middle items.
-- **cursor**: The current page slot. Available only when `disableCursorAnimation` is `false` and `disableAnimation` is `false.
+- **cursor**: The current page slot. Available only when `disableCursorAnimation` is `false` and `disableAnimation` is `false`.
 - **forwardIcon**: The forward icon slot. The one that appears when hovering the ellipsis button.
 - **ellipsis**: The ellipsis slot.
 - **chevronNext**: The chevron next icon slot.

apps/docs/content/docs/components/radio-group.mdx

@@ -100,7 +100,7 @@ In case you need to customize the radio group even further, you can use the `use
 
 <CodeDemo title="Custom Implementation" files={radioGroupContent.customImpl} />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -130,7 +130,7 @@ In case you need to customize the radio group even further, you can use the `use
   - **data-disabled**:
     When the radio is disabled. Based on `isDisabled` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -141,7 +141,7 @@ In case you need to customize the radio group even further, you can use the `use
 - Keyboard focus management and cross browser normalization.
 - Group and radio labeling support for assistive technology.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

apps/docs/content/docs/components/select.mdx

@@ -359,9 +359,9 @@ the popover and listbox components.
 | children\*                  | `ReactNode[]`                                                                                                                                                                                                          | The children to render. Usually a list of `SelectItem` and `SelectSection` elements.                                   | -                  |
 | items                       | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)                                                                                                                 | Item objects in the select. (dynamic)                                                                                  | -                  |
 | selectionMode               | `single` \| `multiple`                                                                                                                                                                                                 | The type of selection that is allowed in the collection.                                                               | -                  |
-| selectedKeys                | `all` \| `React.Key[]`                                                                                                                                                                                                 | The currently selected keys in the collection (controlled).                                                            | -                  |
-| disabledKeys                | `all` \| `React.Key[]`                                                                                                                                                                                                 | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.                | -                  |
-| defaultSelectedKeys         | `all` \| `React.Key[]`                                                                                                                                                                                                 | The initial selected keys in the collection (uncontrolled).                                                            | -                  |
+| selectedKeys                | `all` \| `Iterable<React.Key>`                                                                                                                                                                                                | The currently selected keys in the collection (controlled).                                                            | -                  |
+| disabledKeys                | `Iterable<React.Key>`                                                                                                                                                                                                | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.                | -                  |
+| defaultSelectedKeys         | `all` \| `Iterable<React.Key>`                                                                                                                                                                                                 | The initial selected keys in the collection (uncontrolled).                                                            | -                  |
 | variant                     | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                                                                                                        | The variant of the select.                                                                                             | `flat`             |
 | color                       | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                                                                                            | The color of the select.                                                                                               | `default`          |
 | size                        | `sm` \| `md` \| `lg`                                                                                                                                                                                                   | The size of the select.                                                                                                | `md`               |
@@ -400,7 +400,7 @@ the popover and listbox components.
 | ----------------- | --------------------------------------------- | ------------------------------------------------------------------------------------ |
 | onClose           | `() => void`                                  | Callback fired when the select popover is closed.                                    |
 | onOpenChange      | `(isOpen: boolean) => void`                   | Callback fired when the select popover is opened or closed.                          |
-| onSelectionChange | `(keys: React.Key[]) => void`                 | Callback fired when the selected keys change.                                        |
+| onSelectionChange | `(keys: "all" \| Set<React.Key> & {anchorKey?: string; currentKey?: string}) => void`                 | Callback fired when the selected keys change.                                        |
 | onChange          | `React.ChangeEvent<HTMLSelectElement>`        | Native select change event, fired when the selected value changes.                   |
 | renderValue       | [RenderValueFunction](#render-value-function) | Function to render the value of the select. It renders the selected item by default. |
 

apps/docs/content/docs/components/snippet.mdx

@@ -92,7 +92,7 @@ You can customize the copy and copied icons by using the `copyIcon` and `checkIc
 - **copyIcon**: The copy icon slot.
 - **checkIcon**: The check icon slot.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 
@@ -104,7 +104,7 @@ You can customize the copy and copied icons by using the `copyIcon` and `checkIc
 | size             | `sm` \| `md` \| `lg`                                                            | The size of the snippet.                                                                       | `md`    |
 | radius           | `none` \| `sm` \| `md` \| `lg`                                                  | The radius of the snippet.                                                                     | `lg`    |
 | symbol           | `string` \| `ReactNode`                                                         | The symbol to show before the snippet.                                                         | `$`     |
-| timeout          | `number`                                                                        | he time in milliseconds to wait before resetting the clipboard.                                | `2000`  |
+| timeout          | `number`                                                                        | The time in milliseconds to wait before resetting the clipboard.                                | `2000`  |
 | codeString       | `string`                                                                        | The code string to copy. if `codeString` is passed, it will be copied instead of the children. | -       |
 | tooltipProps     | [TooltipProps](/docs/components/tooltip#tooltip-props)                          | The props of the tooltip.                                                                      | -       |
 | copyIcon         | `ReactNode`                                                                     | The copy icon.                                                                                 | -       |

apps/docs/content/docs/components/spinner.mdx

@@ -68,7 +68,7 @@ Spinner express an unspecified wait time or display the length of a process.
 - **circle2**: The second circle of the spinner.
 - **label**: The label content.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

apps/docs/content/docs/components/switch.mdx

@@ -97,7 +97,7 @@ In case you need to customize the switch even further, you can use the `useSwitc
 
 <CodeDemo title="Custom Implementation" files={switchContent.customImpl} />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -118,7 +118,7 @@ In case you need to customize the switch even further, you can use the `useSwitc
 - **data-disabled**:
   When the switch is disabled. Based on `isDisabled` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -129,7 +129,7 @@ In case you need to customize the switch even further, you can use the `useSwitc
 - Labeling support for assistive technology.
 - Exposed as a switch to assistive technology via ARIA
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

apps/docs/content/docs/components/table.mdx

@@ -223,6 +223,7 @@ sure to install it before using the sorting feature.
     npm: "npm install @react-stately/data",
     yarn: "yarn add @react-stately/data",
     pnpm: "pnpm add @react-stately/data",
+    bun: "bun add @react-stately/data",
   }}
 />
 
@@ -288,6 +289,23 @@ It is also possible to use the [Pagination](/components/pagination) component to
 Table also supports infinite pagination. To do so, you can use the `useAsyncList` hook from [@react-stately/data](https://react-spectrum.adobe.com/react-stately/useAsyncList.html) and
 [@nextui-org/use-infinite-scroll](https://www.npmjs.com/package/@nextui-org/use-infinite-scroll) hook.
 
+<PackageManagers
+  commands={{
+    npm: "npm install @react-stately/data @nextui-org/use-infinite-scroll",
+    yarn: "yarn add @react-stately/data @nextui-org/use-infinite-scroll",
+    pnpm: "pnpm add @react-stately/data @nextui-org/use-infinite-scroll",
+    bun: "bun add @react-stately/data @nextui-org/use-infinite-scroll",
+  }}
+/>
+
+```jsx
+import { useInfiniteScroll } from "@nextui-org/use-infinite-scroll";
+
+import { useAsyncList } from "@react-stately/data";
+```
+
+<Spacer y={2} />
+
 <CodeDemo
   asIframe
   title="Infinite Paginated Table"
@@ -295,6 +313,8 @@ Table also supports infinite pagination. To do so, you can use the `useAsyncList
   files={tableContent.infinitePagination}
   previewHeight="620px"
   displayMode="visible"
+  showPreview={true}
+  showOpenInCodeSandbox={false}
   iframeSrc="/examples/table/infinite-pagination"
 />
 

apps/docs/content/docs/components/tabs.mdx

@@ -255,7 +255,6 @@ You can customize the `Tabs` component by passing custom Tailwind CSS classes to
 | disabledKeys           | `React.Key[]`                                                                                          | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.      | -           |
 | selectedKey            | `React.Key`                                                                                            | The key for the currently selected item.                                                                     | -           |
 | defaultSelectedKey     | `React.Key`                                                                                            | The key for the initially selected item.                                                                     | -           |
-| disallowEmptySelection | `boolean`                                                                                              | Whether the tabs should allow empty selection.                                                               | `false`     |
 | shouldSelectOnPressUp  | `boolean`                                                                                              | Whether the tabs selection should occur on press up instead of press down.                                   | `true`      |
 | keyboardActivation     | `automatic` \| `manual`                                                                                | Whether tabs are activated automatically on focus or manually.                                               | `automatic` |
 | motionProps            | [MotionProps](#motion-props)                                                                           | The props to modify the cursor framer motion animation. Use the `variants` API to create your own animation. | -           |

apps/docs/content/docs/components/textarea.mdx

@@ -99,7 +99,7 @@ You can use the `value` and `onValueChange` properties to control the input valu
 - **description**: The description of the textarea.
 - **errorMessage**: The error message of the textarea.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -120,7 +120,7 @@ You can use the `value` and `onValueChange` properties to control the input valu
 - **data-disabled**:
   When the textarea is disabled. Based on `isDisabled` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -130,7 +130,7 @@ You can use the `value` and `onValueChange` properties to control the input valu
 - Required and invalid states exposed to assistive technology via ARIA.
 - Support for description and error message help text linked to the input via ARIA.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

apps/docs/content/docs/customization/override-styles.mdx

@@ -177,7 +177,7 @@ With the corresponding CSS module:
 
 ### CSS-in-JS
 
-If you are a CSS-in-JS library such as [styled-components](https://styled-components.com/) or [emotion](https://emotion.sh/), you can use the following
+If you are using a CSS-in-JS library such as [styled-components](https://styled-components.com/) or [emotion](https://emotion.sh/), you can use the following
 example to override the styles of a component:
 
 

apps/docs/content/docs/customization/theme.mdx

@@ -28,7 +28,11 @@ app's look and feel.
 The first step to using NextUI's theming capability is adding the `nextui` plugin to your
 `tailwind.config.js` file. Below is an example of how to do this:
 
-```js {8,13-14}
+<Blockquote color="primary">
+**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules`
+</Blockquote>
+
+```js {9,14-15}
 // tailwind.config.js
 const {nextui} = require("@nextui-org/react");
 
@@ -36,6 +40,7 @@ const {nextui} = require("@nextui-org/react");
 module.exports = {
   content: [
     // ...
+    // make sure it's pointing to the ROOT node_module
     "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {

apps/docs/content/docs/frameworks/astro.mdx

@@ -9,7 +9,7 @@ Requirements:
 
 - [React 18](https://reactjs.org/) or later
 - [Tailwind CSS 3.4](https://tailwindcss.com/docs/guides/astro) or later
-- [Framer Motion 4](https://www.framer.com/motion/) or later
+- [Framer Motion 11](https://www.framer.com/motion/) or later
 
 ------
 
@@ -34,11 +34,23 @@ In your Astro project, run one of the following command to install NextUI:
     npm: 'npm i @nextui-org/react framer-motion',
     yarn: 'yarn add @nextui-org/react framer-motion',
     pnpm: 'pnpm add @nextui-org/react framer-motion',
+    bun: "bun add @nextui-org/react framer-motion"
   }}
 />
 
+### Hoisted Dependencies Setup
 
-<Spacer y={4}/>
+<Blockquote color="primary">
+**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+</Blockquote>
+
+If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
+
+```bash
+public-hoist-pattern[]=*@nextui-org/*
+```
+
+After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
 
 ### Tailwind CSS Setup
 
@@ -46,8 +58,11 @@ NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS firs
 [installation guide](https://tailwindcss.com/docs/guides/astro) to install Tailwind CSS. Then you need to add 
 the following code to your `tailwind.config.cjs` file:
 
+<Blockquote color="primary">
+**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules`
+</Blockquote>
 
-```js {8,13-14}
+```js {2,9,14-15}
 // tailwind.config.cjs
 const { nextui } = require("@nextui-org/react");
 
@@ -55,7 +70,8 @@ const { nextui } = require("@nextui-org/react");
 module.exports = {
   content: [
     // ...
-    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
+    // make sure it's pointing to the ROOT node_module
+    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},
@@ -85,17 +101,6 @@ import {Button} from '@nextui-org/react';
 Note that you have to add `client:visible` to the component to make it visible only on the client side. Otherwise
 some functionalities of NextUI components may not work properly.
 
-
-### Setup pnpm (optional)
-
-If you are using pnpm, you need to add the following code to your `.npmrc` file:
-
-```bash
-public-hoist-pattern[]=*@nextui-org/*
-```
-
-After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
-
 </Steps>
 
 <Blockquote

apps/docs/content/docs/frameworks/nextjs.mdx

@@ -11,7 +11,7 @@ Requirements:
 - [Next.js 12](https://nextjs.org/) or later
 - [React 18](https://reactjs.org/) or later
 - [Tailwind CSS 3.4](https://tailwindcss.com/docs/guides/nextjs) or later
-- [Framer Motion 4](https://www.framer.com/motion/) or later
+- [Framer Motion 11](https://www.framer.com/motion/) or later
 
 ------
 
@@ -25,7 +25,7 @@ Next.js 13 introduces a new `app/` directory structure. By default it uses Serve
 As NextUI components use React hooks, we added the `use client;` at build time, so you can import them
 directly in your React Server Components (RSC).
 
-## NextUI CLI (recommended)
+### NextUI CLI (recommended)
 
 If you are starting a new project, you can use the NextUI CLI to create a new project with NextUI pre-configured:
 
@@ -51,8 +51,7 @@ If you are starting a new project, you can run one of the following commands to
   }}
 />
 
-
-## Automatic Installation
+### Automatic Installation
 
 You can add individual components using the CLI. For example, to add a button component:
 
@@ -100,7 +99,7 @@ Filtered results for: Enter something to filter
 
 You still need to add the provider to your app manually (we are working on automating this step).
 
-```jsx
+```jsx {3,7,9}
 // app/providers.tsx
 
 import {NextUIProvider} from '@nextui-org/react'
@@ -114,9 +113,14 @@ export function Providers({children}: { children: React.ReactNode }) {
 }
 ```
 
-```jsx
+<Spacer y={4} />
+
+```jsx {6,10,12,14}
 // app/layout.tsx
 
+// globals.css includes @tailwind directives
+// adjust the path if necessary
+import "@/styles/globals.css";
 import {Providers} from "./providers";
 
 export default function RootLayout({children}: { children: React.ReactNode }) {
@@ -132,7 +136,6 @@ export default function RootLayout({children}: { children: React.ReactNode }) {
 }
 ```
 
-
 ### Manual Installation
 
 <Steps>
@@ -146,17 +149,35 @@ In your Next.js project, run one of the following commands to install NextUI:
     npm: 'npm i @nextui-org/react framer-motion',
     yarn: 'yarn add @nextui-org/react framer-motion',
     pnpm: 'pnpm add @nextui-org/react framer-motion',
+    bun: "bun add @nextui-org/react framer-motion"
   }}
 />
 
+### Hoisted Dependencies Setup
+
+<Blockquote color="primary">
+**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+</Blockquote>
+
+If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
+
+```bash
+public-hoist-pattern[]=*@nextui-org/*
+```
+
+After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
+
 ### Tailwind CSS Setup
 
 NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
 [installation guide](https://tailwindcss.com/docs/guides/nextjs) to install Tailwind CSS. Then you need to add 
 the following code to your `tailwind.config.js` file:
 
+<Blockquote color="primary">
+**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules`
+</Blockquote>
 
-```js {8,13-14}
+```js {2,9,14-15}
 // tailwind.config.js
 import {nextui} from "@nextui-org/react";
 
@@ -164,6 +185,7 @@ import {nextui} from "@nextui-org/react";
 const config = {
   content: [
     // ...
+    // make sure it's pointing to the ROOT node_module
     "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
   ],
   theme: {
@@ -180,7 +202,7 @@ export default config;
 
 Go to your `app/providers.tsx` or `app/providers.jsx` (create it if it doesn't exist) and wrap the Component with the `NextUIProvider`:
 
-```jsx
+```jsx {4,8,10}
 // app/providers.tsx
 'use client'
 
@@ -199,8 +221,12 @@ export function Providers({children}: { children: React.ReactNode }) {
 
 Now, Go to your `root` layout page and wrap it with the `Providers`:
 
-```jsx {6,8,10}
+```jsx {6,10,12,14}
 // app/layout.tsx
+
+// globals.css includes @tailwind directives
+// adjust the path if necessary
+import "@/styles/globals.css";
 import {Providers} from "./providers";
 
 export default function RootLayout({children}: { children: React.ReactNode }) {
@@ -225,7 +251,7 @@ of them by adding the `dark`/`light` class to the `html` tag. See the [theme doc
 Now you can import any NextUI component directly in your Server Components without needing to use
 the `use client;` directive:
 
-```jsx {2}
+```jsx {2,7}
 // app/page.tsx
 import {Button} from '@nextui-org/button'; 
 
@@ -239,20 +265,8 @@ export default function Page() {
 ```
 > **Important 🚨**: Note that you need to import the component from the individual package, not from `@nextui-org/react`. 
 
-### Setup pnpm (optional)
-
-If you are using pnpm, you need to add the following code to your `.npmrc` file:
-
-```bash
-public-hoist-pattern[]=*@nextui-org/*
-```
-
-After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
-
 </Steps>
 
-<Spacer y={8} />
-
 ## Pages Directory Setup 
 
 ### NextUI CLI (recommended)
@@ -331,7 +345,7 @@ Filtered results for: Enter something to filter
 
 You still need to add the provider to your app manually (we are working on automating this step).
 
-```jsx
+```jsx {3,7,9}
 // app/providers.tsx
 
 import {NextUIProvider} from '@nextui-org/react'
@@ -345,9 +359,14 @@ export function Providers({children}: { children: React.ReactNode }) {
 }
 ```
 
-```jsx
+<Spacer y={4} />
+
+```jsx {6,10,12,14}
 // app/layout.tsx
 
+// globals.css includes @tailwind directives
+// adjust the path if necessary
+import "@/styles/globals.css";
 import {Providers} from "./providers";
 
 export default function RootLayout({children}: { children: React.ReactNode }) {
@@ -376,17 +395,35 @@ In your Next.js project, run one of the following commands to install NextUI:
     npm: 'npm i @nextui-org/react framer-motion',
     yarn: 'yarn add @nextui-org/react framer-motion',
     pnpm: 'pnpm add @nextui-org/react framer-motion',
+    bun: "bun add @nextui-org/react framer-motion"
   }}
 />
 
+### Hoisted Dependencies Setup
+
+<Blockquote color="primary">
+**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+</Blockquote>
+
+If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
+
+```bash
+public-hoist-pattern[]=*@nextui-org/*
+```
+
+After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
+
 ### Tailwind CSS Setup
 
 NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
 [installation guide](https://tailwindcss.com/docs/guides/nextjs) to install Tailwind CSS. Then you need to add 
 the following code to your `tailwind.config.js` file:
 
+<Blockquote color="primary">
+**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules`
+</Blockquote>
 
-```js {8,13-14}
+```js {2,9,14-15}
 // tailwind.config.js
 import {nextui} from "@nextui-org/react";
 
@@ -394,6 +431,7 @@ import {nextui} from "@nextui-org/react";
 const config = {
   content: [
     // ...
+    // make sure it's pointing to the ROOT node_module
     "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
   ],
   theme: {
@@ -410,7 +448,7 @@ export default config;
 
 Go to pages`/_app.js` or `pages/_app.tsx` (create it if it doesn't exist) and wrap the Component with the `NextUIProvider`:
 
-```jsx
+```jsx {2,6,8}
 // pages/_app.js
 import {NextUIProvider} from '@nextui-org/react'
 
@@ -429,7 +467,7 @@ export default MyApp;
 
 Now you can import any NextUI component wherever you want:
 
-```jsx
+```jsx {1,6}
 import {Button} from '@nextui-org/react'
 
 export default function Page() {
@@ -440,17 +478,6 @@ export default function Page() {
   )
 }
 ```
-
-### Setup pnpm (optional)
-
-If you are using pnpm, you need to add the following code to your `.npmrc` file:
-
-```bash
-public-hoist-pattern[]=*@nextui-org/*
-```
-
-After modifying the `.npmrc` file, you must run `pnpm install` again to ensure the dependencies are installed correctly.
-
 </Steps>
 
 <Blockquote

apps/docs/content/docs/frameworks/remix.mdx

@@ -9,7 +9,7 @@ Requirements:
 
 - [React 18](https://reactjs.org/) or later
 - [Tailwind CSS 3.4](https://tailwindcss.com/docs/guides/remix) or later
-- [Framer Motion 4](https://www.framer.com/motion/) or later
+- [Framer Motion 11](https://www.framer.com/motion/) or later
 
 ------
 
@@ -28,9 +28,23 @@ In your Remix project, run one of the following command to install NextUI:
     npm: 'npm i @nextui-org/react framer-motion',
     yarn: 'yarn add @nextui-org/react framer-motion',
     pnpm: 'pnpm add @nextui-org/react framer-motion',
+    bun: "bun add @nextui-org/react framer-motion"
   }}
 />
 
+### Hoisted Dependencies Setup
+
+<Blockquote color="primary">
+**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+</Blockquote>
+
+If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
+
+```bash
+public-hoist-pattern[]=*@nextui-org/*
+```
+
+After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
 
 ### Tailwind CSS Setup
 
@@ -38,8 +52,11 @@ NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS firs
 [installation guide](https://tailwindcss.com/docs/guides/remix) to install Tailwind CSS. Then you need to add 
 the following code to your `tailwind.config.js` file:
 
+<Blockquote color="primary">
+**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules`
+</Blockquote>
 
-```ts {9,14-15}
+```ts {2,10,15-16}
 // tailwind.config.ts
 const { nextui } = require("@nextui-org/react");
 
@@ -48,6 +65,7 @@ import type { Config } from 'tailwindcss'
 export default {
   content: [
     // ...
+    // make sure it's pointing to the ROOT node_module
     "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
   ],
   theme: {
@@ -95,16 +113,6 @@ export default function App() {
 }
 ```
 
-### Setup pnpm (optional)
-
-If you are using pnpm, you need to add the following code to your `.npmrc` file:
-
-```bash
-public-hoist-pattern[]=*@nextui-org/*
-```
-
-After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
-
 </Steps>
 
 <Blockquote

apps/docs/content/docs/frameworks/vite.mdx

@@ -10,7 +10,7 @@ Requirements:
 - [Vite 2](https://vitejs.dev/) or later
 - [React 18](https://reactjs.org/) or later
 - [Tailwind CSS 3.4](https://tailwindcss.com/docs/guides/vite#react) or later
-- [Framer Motion 4](https://www.framer.com/motion/) or later
+- [Framer Motion 11](https://www.framer.com/motion/) or later
 
 ------
 
@@ -29,17 +29,35 @@ In your Vite React project, run one of the following command to install NextUI:
     npm: 'npm i @nextui-org/react framer-motion',
     yarn: 'yarn add @nextui-org/react framer-motion',
     pnpm: 'pnpm add @nextui-org/react framer-motion',
+    bun: "bun add @nextui-org/react framer-motion"
   }}
 />
 
+### Hoisted Dependencies Setup
+
+<Blockquote color="primary">
+**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+</Blockquote>
+
+If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
+
+```bash
+public-hoist-pattern[]=*@nextui-org/*
+```
+
+After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
+
 ### Tailwind CSS Setup
 
 NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
 [installation guide](https://tailwindcss.com/docs/guides/vite#react) to install Tailwind CSS. Then you need to add 
 the following code to your `tailwind.config.js` file:
 
+<Blockquote color="primary">
+**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules`
+</Blockquote>
 
-```js {8,13-14}
+```js {2,8,13-14}
 // tailwind.config.js
 const { nextui } = require("@nextui-org/react");
 
@@ -63,7 +81,7 @@ After installing NextUI, you need to set up the `NextUIProvider` at the `root` o
 
 Go to the src directory and inside `main.jsx` or `main.tsx`, wrap `NextUIProvider` around App:
 
-```jsx
+```jsx {4,10,12}
 // main.tsx or main.jsx
 import React from 'react'
 import ReactDOM from 'react-dom/client'
@@ -80,16 +98,6 @@ ReactDOM.createRoot(document.getElementById('root')).render(
 )
 ```
 
-### Setup pnpm (optional)
-
-If you are using pnpm, you need to add the following code to your `.npmrc` file:
-
-```bash
-public-hoist-pattern[]=*@nextui-org/*
-```
-
-After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
-
 </Steps>
 
 <Blockquote

apps/docs/content/docs/guide/cli.mdx

@@ -30,11 +30,16 @@ To install the `CLI` globally, execute one of the following commands in your ter
 
 ### Without Installation
 
-Alternatively, you can use the `CLI` without a global installation by employing `npx`:
+Alternatively, you can use the `CLI` without a global installation by running the following command:
 
-```bash
-npx nextui-cli@latest
-```
+<PackageManagers
+  commands={{
+    npm: "npx nextui-cli@latest",
+    yarn: "yarn dlx nextui-cli@latest",
+    pnpm: "pnpm dlx nextui-cli@latest",
+    bun: "bunx nextui-cli@latest",
+  }}
+/>
 
 </Steps>
 
@@ -114,15 +119,25 @@ You will be prompted to configure your project:
 
 Install the dependencies to start the local server:
 
-```codeBlock bash
-cd my-nextui-app && npm install
-```
+<PackageManagers
+  commands={{
+    npm: "cd my-nextui-app && npm install",
+    yarn: "cd my-nextui-app && yarn install",
+    pnpm: "cd my-nextui-app && pnpm install",
+    bun: "cd my-nextui-app && bun install",
+  }}
+/>
 
 Start the local server:
 
-```codeBlock bash
-npm run dev
-```
+<PackageManagers
+  commands={{
+    npm: "npm run dev",
+    yarn: "yarn run dev",
+    pnpm: "pnpm run dev",
+    bun: "bun run dev",
+  }}
+/>
 
 ## add
 
@@ -178,6 +193,12 @@ Tailwind CSS settings have been updated in: /project-path/tailwind.config.js
 
 ## upgrade
 
+Upgrade all the NextUI components within your project.
+
+```codeBlock bash
+nextui upgrade --all
+```
+
 Upgrade specific NextUI components within your project using the upgrade command to ensure they are up to date.
 
 ```codeBlock bash

apps/docs/content/docs/guide/installation.mdx

@@ -9,7 +9,7 @@ Requirements:
 
 - [React 18](https://reactjs.org/) or later
 - [Tailwind CSS 3.4](https://tailwindcss.com/) or later
-- [Framer Motion 4](https://www.framer.com/motion/) or later
+- [Framer Motion 11](https://www.framer.com/motion/) or later
 
 ---
 
@@ -19,12 +19,21 @@ Requirements:
 
 Using the CLI is now the easiest way to start a NextUI project. You can initialize your project and add components directly via the CLI:
 
-```codeBlock bash
-npm install -g nextui-cli
-```
+<Steps>
 
-<Spacer y={4}/>
+### Installation 
+Execute one of the following commands in your terminal:
+<PackageManagers
+  commands={{
+    npm: "npm install -g nextui-cli",
+    yarn: "yarn add -g nextui-cli",
+    pnpm: "pnpm add -g nextui-cli",
+    bun: "bun add -g nextui-cli",
+  }}
+/>
 
+### Initialization and Starting the App
+Initialize the project by using the `init` command. 
 ```codeBlock bash
 nextui init my-nextui-app
 ```
@@ -39,15 +48,26 @@ You will be prompted to configure your project:
 ```
 
 Install the dependencies to start the local server:
-```codeBlock bash
-cd my-nextui-app && npm install
-```
+<PackageManagers
+  commands={{
+    npm: "cd my-nextui-app && npm install",
+    yarn: "cd my-nextui-app && yarn install",
+    pnpm: "cd my-nextui-app && pnpm install",
+    bun: "cd my-nextui-app && bun install",
+  }}
+/>
 
 Start the local server:
-```codeBlock bash
-npm run dev
-```
+<PackageManagers
+  commands={{
+    npm: "npm run dev",
+    yarn: "yarn run dev",
+    pnpm: "pnpm run dev",
+    bun: "bun run dev",
+  }}
+/>
 
+### Adding the Components
 Once your NextUI project is ready to develop, you can add individual components using the CLI. For example, to add a button component:
 
 ```codeBlock bash
@@ -92,13 +112,15 @@ Filtered results for: Enter something to filter
 ◯  code
 ```
 
+</Steps>
+
 ## Manual Installation
 
-If you prefer not to use the CLI, follow these steps to manually set up NextUI in your project:
+If you prefer not to use the CLI, you may try either global installation or individual installation to set up NextUI in your project:
 
 ### Global Installation
 
-The easiest way to get started with NextUI is to use the global installation. Which means
+The easiest way to get started with NextUI is to use the global installation, which means
 that all the components are imported from a single package.
 
 Follow the steps below to install all NextUI components:
@@ -118,13 +140,31 @@ To install NextUI, run one of the following commands in your terminal:
   }}
 />
 
+#### Hoisted Dependencies Setup
+
+<Blockquote color="primary">
+**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+</Blockquote>
+
+If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
+
+```bash
+public-hoist-pattern[]=*@nextui-org/*
+```
+
+After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
+
 #### Tailwind CSS Setup
 
 NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
 [installation guide](https://tailwindcss.com/docs/installation) to install Tailwind CSS. Then you need to add
 the following code to your `tailwind.config.js` file:
 
-```js {8,13-14}
+<Blockquote color="primary">
+**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules`
+</Blockquote>
+
+```js {9,14-15}
 // tailwind.config.js
 const {nextui} = require("@nextui-org/react");
 
@@ -132,6 +172,7 @@ const {nextui} = require("@nextui-org/react");
 module.exports = {
   content: [
     // ...
+    // make sure it's pointing to the ROOT node_module
     "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
@@ -162,16 +203,6 @@ function App() {
 }
 ```
 
-#### Setup pnpm (optional)
-
-If you are using pnpm, you need to add the following code to your `.npmrc` file:
-
-```bash
-public-hoist-pattern[]=*@nextui-org/*
-```
-
-After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
-
 </Steps>
 
 ### Individual Installation
@@ -180,7 +211,9 @@ NextUI is also available as individual packages. You can install each package se
 is useful if you want to reduce the size of your CSS bundle as it will only include styles for the components
 you're actually using.
 
-> **Note**: JavaScript bundle size will not change due to tree shaking support in NextUI.
+<Blockquote color="primary">
+**Note**: JavaScript bundle size will not change due to tree shaking support in NextUI.
+</Blockquote>
 
 Follow the steps below to install each package separately:
 
@@ -217,6 +250,20 @@ in your terminal:
   }}
 />
 
+#### Hoisted Dependencies Setup
+
+<Blockquote color="primary">
+**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+</Blockquote>
+
+If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
+
+```bash
+public-hoist-pattern[]=*@nextui-org/*
+```
+
+After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
+
 #### Tailwind CSS Setup
 
 TailwindCSS setup changes a bit when you use individual packages. You only need to add the
@@ -278,18 +325,6 @@ function App() {
   );
 }
 ```
-
-
-#### Setup pnpm (optional)
-
-If you are using pnpm, you need to add the following code to your `.npmrc` file:
-
-```bash
-public-hoist-pattern[]=*@nextui-org/*
-```
-
-After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
-
 </Steps>
 
 <Blockquote color="warning">

apps/docs/content/docs/guide/routing.mdx

@@ -17,7 +17,7 @@ component configures all NextUI components within it to navigate using the clien
 Set this up once in the root of your app, and any NextUI component with the href prop will automatically navigate
 using your router.
 
-### NextUIProvider Setup
+## NextUIProvider Setup
 
 The `NextUIProvider` accepts a prop called `navigate`. This should be set to a function received from your
 router for performing a client side navigation programmatically. The following example shows the general
@@ -43,9 +43,9 @@ function App() {
 
 <Spacer y={2} />
 
-### Next.js 
+## Next.js 
 
-#### App Router
+### App Router
 
 Go to your `app/providers.tsx` or `app/providers.jsx` (create it if it doesn't exist) and add the
 `useRouter` hook from `next/navigation`, it returns a router object that can be used to perform navigation.
@@ -95,15 +95,49 @@ export default function RootLayout({children}: { children: React.ReactNode }) {
 
 > **Note**: Skip this step if you already set up the `NextUIProvider` in your app.
 
+#### Add useHref (Optional)
+
+If you are using the Next.js [basePath](https://nextjs.org/docs/app/api-reference/next-config-js/basePath) setting, you'll need to configure an environment variable to access it. 
+
+```js
+// next.config.js
+const basePath = '...';
+const nextConfig = {
+  basePath,
+  env: {
+    BASE_PATH: basePath
+  }
+};
+```
+Then, provide a custom `useHref` function to prepend it to the href for all links.
+
+```tsx {9,12}
+// app/providers.tsx
+'use client'
+
+import {NextUIProvider} from '@nextui-org/react';
+import {useRouter} from 'next/navigation'
+
+export function Providers({children}: { children: React.ReactNode }) {
+  const router = useRouter();
+  const useHref = (href: string) => process.env.BASE_PATH + href;
+
+  return (
+    <NextUIProvider navigate={router.push} useHref={useHref}>
+      {children}
+    </NextUIProvider>
+  )
+}
+```
+
 </Steps>
 
-#### Pages Router
+### Pages Router
 
 Go to pages`/_app.js` or `pages/_app.tsx` (create it if it doesn't exist) and add the`useRouter` hook 
 from `next/router`, it returns a router object that can be used to perform navigation.
 
-
-```tsx {7}
+```tsx {7,10}
 // pages/_app.tsx
 import type { AppProps } from 'next/app';
 import {NextUIProvider} from '@nextui-org/react';
@@ -122,23 +156,47 @@ function MyApp({ Component, pageProps }: AppProps) {
 export default MyApp;
 ```
 
-### React Router
+When using the [basePath](https://nextjs.org/docs/app/api-reference/next-config-js/basePath) configuration option, provide a `useHref` option to the router passed to Provider to prepend it to links automatically.
 
-The `useNavigate` hook from `react-router-dom` returns a `navigate` function that can be used to perform navigation.
+```tsx {8,11}
+// pages/_app.tsx
+import type { AppProps } from 'next/app';
+import {NextUIProvider} from '@nextui-org/react';
+import {useRouter} from 'next/router';
+
+function MyApp({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+  const useHref = (href: string) => router.basePath + href;
+
+  return (
+    <NextUIProvider navigate={router.push} useHref={useHref}>
+      <Component {...pageProps} />
+    </NextUIProvider>
+  )
+}
+
+export default MyApp;
+```
+
+## React Router
+
+The `useNavigate` hook from `react-router-dom` returns a `navigate` function that can be used to perform navigation. 
+
+The `useHref` hook can also be provided if you're using React Router's `basename` option. Ensure that the component that calls useNavigate and renders Provider is inside the router component (e.g. `BrowserRouter`) so that it has access to React Router's internal context. The React Router `<Routes>` element should also be defined inside `<NextUIProvider>` so that links inside the rendered routes have access to the router.
 
 Go to the `App` file commonly called `App.jsx` or `App.tsx`, add the `useNavigate` hook and pass the 
 `navigate` function to the `NextUIProvider`:
 
 ```jsx {6,9}
 // App.tsx or App.jsx
-import {BrowserRouter, useNavigate} from 'react-router-dom';
+import {BrowserRouter, useNavigate, useHref} from 'react-router-dom';
 import {NextUIProvider} from '@nextui-org/react';
 
 function App() {
   const navigate = useNavigate();
 
   return (
-    <NextUIProvider navigate={navigate}>
+    <NextUIProvider navigate={navigate} useHref={useHref}>
       {/* Your app here... */}
       <Routes>
         <Route path="/" element={<HomePage />} />
@@ -164,17 +222,16 @@ component (e.g. `BrowserRouter`) so that it has access to React Router's interna
 element should also be defined inside `NextUIProvider` so that links inside the rendered routes have access
 to the router.
 
+## Remix
 
-### Remix
-
-Remix uses React Router under the hood, so the same `useNavigate` hook described above also works in Remix 
+Remix uses React Router under the hood, so the same `useNavigate` and `useHref` hook described above also works in Remix 
 apps. `NextUIProvider` should be rendered at the `root` of each page that includes NextUI components, or in 
 `app/root.tsx` to add it to all pages. See the [Remix docs](https://remix.run/docs/en/main/file-conventions/root) 
 for more details.
 
 ```jsx {14}
 // app/root.tsx
-import {useNavigate, Outlet} from '@remix-run/react';
+import {useNavigate, useHref, Outlet} from '@remix-run/react';
 import {NextUIProvider} from '@nextui-org/react';
 
 export default function App() {
@@ -186,7 +243,7 @@ export default function App() {
         {/* ... */}
       </head>
       <body>
-        <NextUIProvider navigate={navigate}>
+        <NextUIProvider navigate={navigate} useHref={useHref}>
           <Outlet />
         </NextUIProvider>
         {/* ... */}
@@ -196,8 +253,29 @@ export default function App() {
 }
 ```
 
+## TanStack
 
-### Usage examples
+To use [TanStack Router](https://tanstack.com/router/latest) with NextUI, render NextUI's RouterProvider inside your root route. Use `router.navigate` in the `navigate` prop, and `router.buildLocation` in the `useHref` prop. 
+
+```tsx {9,10}
+// app/root.tsx
+import {NextUIProvider} from '@nextui-org/react';
+
+function RootRoute() {
+  let router = useRouter();
+
+  return (
+    <NextUIProvider 
+      navigate={(to, options) => router.navigate({ to, ...options })}
+      useHref={(to) => router.buildLocation(to).href}
+    >
+      {/* You app here... */}
+    </NextUIProvider>
+  );
+}
+```
+
+## Usage examples
 
 Now that you have set up the `NextUIProvider` in your app, you can use the `href` prop in the `Tabs`, 
 `Listbox` and `Dropdown` items to navigate between pages.
@@ -245,4 +323,4 @@ function App() {
     </>
   );
 }
-```
+```

apps/docs/content/docs/guide/upgrade-to-v2.mdx

@@ -10,7 +10,7 @@ Requirements:
 
 - [React 18](https://reactjs.org/) or later
 - [Tailwind CSS 3.4](https://tailwindcss.com/) or later
-- [Framer Motion 4](https://www.framer.com/motion/) or later
+- [Framer Motion 11](https://www.framer.com/motion/) or later
 
 ----- 
 
@@ -42,6 +42,20 @@ In your Next.js project, run one of the following command to install NextUI:
   }}
 />
 
+### Hoisted Dependencies Setup
+
+<Blockquote color="primary">
+**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+</Blockquote>
+
+If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
+
+```bash
+public-hoist-pattern[]=*@nextui-org/*
+```
+
+After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
+
 ### Tailwind CSS Setup
 
 NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
@@ -49,7 +63,7 @@ NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS firs
 the following code to your `tailwind.config.js` file:
 
 
-```js {8,13-14}
+```js {9,14-15}
 // tailwind.config.js
 const { nextui } = require("@nextui-org/react");
 
@@ -57,6 +71,7 @@ const { nextui } = require("@nextui-org/react");
 module.exports = {
   content: [
     // ...
+    // make sure it's pointing to the ROOT node_module
     "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
   ],
   theme: {
@@ -131,16 +146,6 @@ export default function Page() {
 
 > **Important 🚨**: Note that you need to import the component from the individual package, not the from `@nextui-org/react`. 
 
-### Setup pnpm (optional)
-
-If you are using pnpm, you need to add the following code to your `.npmrc` file:
-
-```bash
-public-hoist-pattern[]=*@nextui-org/*
-```
-
-After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
-
 </Steps>
 
 <Spacer y={8} />
@@ -162,6 +167,20 @@ In your Next.js project, run one of the following command to install NextUI:
   }}
 />
 
+### Hoisted Dependencies Setup
+
+<Blockquote color="primary">
+**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+</Blockquote>
+
+If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
+
+```bash
+public-hoist-pattern[]=*@nextui-org/*
+```
+
+After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
+
 ### Tailwind CSS Setup
 
 NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
@@ -169,7 +188,7 @@ NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS firs
 the following code to your `tailwind.config.js` file:
 
 
-```js {8,13-14}
+```js {9,14-15}
 // tailwind.config.js
 const { nextui } = require("@nextui-org/react");
 
@@ -177,6 +196,7 @@ const { nextui } = require("@nextui-org/react");
 module.exports = {
   content: [
     // ...
+    // make sure it's pointing to the ROOT node_module
     "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
   ],
   theme: {
@@ -222,16 +242,6 @@ export default function Page() {
 }
 ```
 
-### Setup pnpm (optional)
-
-If you are using pnpm, you need to add the following code to your `.npmrc` file:
-
-```bash
-public-hoist-pattern[]=*@nextui-org/*
-```
-
-After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
-
 </Steps>
 
 ## React upgrade steps
@@ -250,7 +260,6 @@ NextUI v2 requires React 18 or later. To upgrade React, run the following comman
   }}
 />
 
-
 ### Install Framer motion
 
 In v2, NextUI now requires `framer-motion` as a dependency. To install both, use the following command:
@@ -263,11 +272,29 @@ In v2, NextUI now requires `framer-motion` as a dependency. To install both, use
   }}
 />
 
+### Hoisted Dependencies Setup
+
+<Blockquote color="primary">
+**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+</Blockquote>
+
+If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
+
+```bash
+public-hoist-pattern[]=*@nextui-org/*
+```
+
+After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
+
 ### TailwindCSS Setup
 
 NextUI v2 now uses Tailwind CSS. Add the NextUI plugin to your `tailwind.config.js` file:
 
-```js {9, 13-14}
+<Blockquote color="primary">
+**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules`
+</Blockquote>
+
+```js {9,14-15}
 // tailwind.config.js
 const { nextui } = require("@nextui-org/react");
 
@@ -275,6 +302,7 @@ const { nextui } = require("@nextui-org/react");
 module.exports = {
   content: [
     // ...
+    // make sure it's pointing to the ROOT node_module
     "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
   ],
   theme: {
@@ -322,16 +350,6 @@ export default function Page() {
 }
 ```
 
-### Setup pnpm (optional)
-
-If you are using pnpm, you need to add the following code to your `.npmrc` file:
-
-```bash
-public-hoist-pattern[]=*@nextui-org/*
-```
-
-After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
-
 </Steps>
 
 <Blockquote

apps/docs/package.json

@@ -38,7 +38,7 @@
     "@nextui-org/use-is-mobile": "workspace:*",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@react-aria/focus": "3.17.1",
-    "@react-aria/i18n": "^3.10.2",
+    "@react-aria/i18n": "3.11.1",
     "@react-aria/interactions": "3.21.3",
     "@react-aria/selection": "3.18.1",
     "@react-aria/ssr": "3.9.4",

apps/docs/scripts/update-search-meta.ts

@@ -54,7 +54,7 @@ async function getMDXMeta(file: string) {
 
 
   const result:ResultType[] = [];
-  const title = !!frontMatter.title ? frontMatter.title : "";
+  const title = frontMatter.title || "";
 
   result.push({
     content: title,
@@ -96,7 +96,7 @@ async function getSearchMeta(saveMode: "algolia" | "local" = "local") {
       .filter((file: any) => file.endsWith(".mdx"));
 
     for (const file of files) {
-      let result = [];
+      let result: ResultType[] = [];
 
       try {
         result = await getMDXMeta(file);

apps/docs/styles/globals.css

@@ -15,7 +15,6 @@ html {
 
 body {
   min-height: 100vh;
-  position: relative;
 }
 /* Experimental */
 /* body::after {