ci(changesets): version packages (#3755)

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

.changeset/config.json

@@ -8,7 +8,7 @@
   "fixed": [],
   "linked": [],
   "access": "public",
-  "baseBranch": "main",
+  "baseBranch": "canary",
   "updateInternalDependencies": "patch",
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true

.coderabbit.yaml

@@ -14,7 +14,7 @@ reviews:
       drafts: false
       base_branches:
         - "main"
-        - "develop"
+        - "canary"
         - "fix/.*"
         - "chore/.*"
         - "feat/.*"

.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

@@ -3,7 +3,7 @@ name: QA
 on:
   pull_request:
     branches:
-      - main
+      - canary
 
 jobs:
   build:
@@ -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

@@ -6,7 +6,7 @@ on:
       - ".changeset/**"
       - "packages/**"
     branches:
-      - main
+      - canary
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -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
@@ -41,12 +41,21 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Create @dev release
+      - name: Sync files from canary to main branch if a publish happens
+        if: steps.changesets.outputs.published == 'true'
+        run: |
+          curl -X POST \
+            -H "Accept: application/vnd.github.v3+json" \
+            -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+            https://api.github.com/repos/owner/repo/dispatches \
+            -d '{"event_type":"sync-canary-to-main"}'
+
+      - name: Create canary release
         if: steps.changesets.outputs.published != 'true'
         run: |
-          git checkout main
-          pnpm version:dev
-          pnpm release:dev
+          git checkout canary
+          pnpm version:canary
+          pnpm release:canary
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

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

@@ -0,0 +1,43 @@
+name: Sync Canary to Main
+
+on:
+  # triggered manually in Github
+  workflow_dispatch:
+  # triggered by the type "sync-canary-to-main" (e.g. from release action after publishing)
+  repository_dispatch:
+    types: [sync-canary-to-main]
+
+jobs:
+  create_pull_request:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0  # Ensure all history is fetched
+
+      - name: Create Pull Request
+        uses: repo-sync/pull-request@v2
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          source_branch: "canary"
+          destination_branch: "main"
+          pr_title: "Auto-sync Canary to Main"
+          pr_body: |
+            ## Automated: Sync from Canary to Main
+
+            This Pull Request is automatically generated to sync the changes from the Canary branch to the Main branch. Below are the included updates:
+
+            ###  Triggered by a Direct Push to Canary:
+            - Please check the recent commits on the Canary branch directly as this sync may include multiple changes.
+
+            ### Triggered by a Pull Request Merge:
+            - Merged Pull Request: [PR#${{ github.event.pull_request.number }}](${{ github.event.pull_request.html_url }}) - ${{ github.event.pull_request.title }}
+              - PR Description: ${{ github.event.pull_request.body }}
+              - Merged by: ${{ github.event.pull_request.merged_by.login }}
+
+            ### Action Required:
+            - Please review the changes carefully.
+            - Approve and merge the Pull Request if everything is in order.
+
+            Thank you for maintaining the Main branch updated and clean.

.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

@@ -14,7 +14,7 @@ Hello!, I am very excited that you are interested in contributing with Next UI.
 ### Tooling
 
 - [PNPM](https://pnpm.io/) to manage packages and dependencies
-- [Tsup](https://tsup.egoist.sh/) to bundle packages
+- [Tsup](https://tsup.egoist.dev/) to bundle packages
 - [Storybook](https://storybook.js.org/) for rapid UI component development and
   testing
 - [Testing Library](https://testing-library.com/) for testing components and
@@ -57,7 +57,7 @@ https://www.conventionalcommits.org/ or check out the
 
 ## Pull Request Guidelines
 
-- The `main` branch is basically a snapshot of the latest stable version. All development must be done in dedicated branches.
+- The `main` branch is basically a snapshot of the latest production version. All development must be done in dedicated branches and will be merged to `canary` branch.
 - Make sure that Github Actions are green
 - It is good to have multiple small commits while working on the PR. We'll let GitHub squash it automatically before the merge.
 - If you add a new feature:
@@ -73,14 +73,14 @@ https://www.conventionalcommits.org/ or check out the
 
 1. Fork of the nextui repository and clone your fork
 
-2. Create a new branch out of the `main` branch. We follow the convention
+2. Create a new branch out of the `canary` branch. We follow the convention
    `[type/scope]`. For example `fix/dropdown-hook` or `docs/menu-typo`. `type`
    can be either `docs`, `fix`, `feat`, `build`, or any other conventional
    commit type. `scope` is just a short id that describes the scope of work.
 
 3. Make and commit your changes following the
    [commit convention](https://github.com/nextui-org/nextui/blob/main/CONTRIBUTING.md#commit-convention).
-   As you develop, you can run `pnpm build --filter=<module>` and
+   As you canary, you can run `pnpm build --filter=<module>` and
    `pnpm test packages/<module>/<pkg>` e.g. `pnpm build --filter=avatar & pnpm test packages/components/avatar` to make sure everything works as expected.
 
    > To know more about the `--filter` option, please check the turborepo [docs](https://turborepo.org/docs/core-concepts/filtering).
@@ -196,13 +196,13 @@ 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:
 
-- Send your pull request to the `main` branch
+- Send your pull request to the `canary` branch
 - Your pull request will be reviewed by the maintainers and the maintainers will decide if it is accepted or not
-- Once the pull request is accepted, the maintainers will merge it to the `main` branch
+- Once the pull request is accepted, the maintainers will merge it to the `canary` branch
 
 ## Visual Changes
 

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/autocomplete/fully-controlled/page.tsx

@@ -53,7 +53,7 @@ export default function Page() {
 
   // Specify how each of the Autocomplete values should change when an
   // option is selected from the list box
-  const onSelectionChange = (key: React.Key) => {
+  const onSelectionChange = (key: React.Key | null) => {
     setFieldState((prevState) => {
       let selectedItem = prevState.items.find((option) => option.value === key);
 

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/cmdk.tsx

@@ -154,6 +154,16 @@ export const Cmdk: FC<{}> = () => {
     }
   };
 
+  const prioritizeFirstLevelItems = (a: SearchResultItem, b: SearchResultItem) => {
+    if (a.type === "lvl1") {
+      return -1;
+    } else if (b.type === "lvl1") {
+      return 1;
+    }
+
+    return 0;
+  };
+
   const results = useMemo<SearchResultItem[]>(
     function getResults() {
       if (query.length < 2) return [];
@@ -165,12 +175,22 @@ export const Cmdk: FC<{}> = () => {
       if (words.length === 1) {
         return matchSorter(data, query, {
           keys: MATCH_KEYS,
+          sorter: (matches) => {
+            matches.sort((a, b) => prioritizeFirstLevelItems(a.item, b.item));
+
+            return matches;
+          },
         }).slice(0, MAX_RESULTS);
       }
 
       const matchesForEachWord = words.map((word) =>
         matchSorter(data, word, {
           keys: MATCH_KEYS,
+          sorter: (matches) => {
+            matches.sort((a, b) => prioritizeFirstLevelItems(a.item, b.item));
+
+            return matches;
+          },
         }),
       );
 

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/codeblock.tsx

@@ -188,9 +188,11 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
                           style={{
                             ...props.style,
                             ...(highlightStyleToken.some((t) => {
+                              const content = token.content.trim();
+
                               const regex = t instanceof RegExp ? t : new RegExp(t);
 
-                              return regex.test(token.content.trim());
+                              return regex.test(content);
                             })
                               ? {color: "rgb(var(--code-function))"}
                               : {}),

apps/docs/components/docs/components/import-tabs.tsx

@@ -8,14 +8,14 @@ type PackageManager = {
 };
 
 const importTabs: PackageManager[] = [
-  {
-    key: "main",
-    name: "Main",
-  },
   {
     key: "individual",
     name: "Individual",
   },
+  {
+    key: "main",
+    name: "Global",
+  },
 ];
 
 export interface ImportTabsProps {

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

@@ -1,7 +1,8 @@
-import {Tabs, Tab, Snippet} from "@nextui-org/react";
+import {Tabs, Tab, Snippet, Code} from "@nextui-org/react";
 import {Key, useState} from "react";
 
 import Codeblock from "./codeblock";
+import {Blockquote} from "./blockquote";
 
 import {YarnIcon, NpmSmallIcon, PnpmIcon, BunIcon, CLIBoldIcon} from "@/components/icons";
 
@@ -9,8 +10,8 @@ type PackageManagerName = "cli" | "npm" | "yarn" | "pnpm" | "bun";
 
 type PackageManager = {
   icon: JSX.Element;
-  label?: string;
   name: PackageManagerName;
+  label?: string;
 };
 
 const packageManagers: PackageManager[] = [
@@ -39,9 +40,13 @@ const packageManagers: PackageManager[] = [
 
 export interface PackageManagersProps {
   commands: Partial<Record<PackageManagerName, React.Key>>;
+  showGlobalInstallWarning?: boolean;
 }
 
-export const PackageManagers = ({commands}: PackageManagersProps) => {
+export const PackageManagers = ({
+  commands,
+  showGlobalInstallWarning = false,
+}: PackageManagersProps) => {
   const [selectedManager, setSelectedManager] = useState<PackageManagerName>(
     commands.cli ? "cli" : "npm",
   );
@@ -51,44 +56,52 @@ export const PackageManagers = ({commands}: PackageManagersProps) => {
   };
 
   return (
-    <Tabs
-      aria-label="NextUI installation commands"
-      classNames={{
-        base: "group mt-4 min-w-[300px] w-full overflow-x-auto",
-        tabList: "h-10",
-      }}
-      selectedKey={selectedManager}
-      variant="underlined"
-      onSelectionChange={handleSelectionChange}
-    >
-      {packageManagers.map(({name, label, icon}) => {
-        if (!commands[name]) return null;
+    <>
+      <Tabs
+        aria-label="NextUI installation commands"
+        classNames={{
+          base: "group mt-4 min-w-[300px] w-full overflow-x-auto",
+          tabList: "h-10",
+        }}
+        selectedKey={selectedManager}
+        variant="underlined"
+        onSelectionChange={handleSelectionChange}
+      >
+        {packageManagers.map(({name, label, icon}) => {
+          if (!commands[name]) return null;
 
-        return (
-          <Tab
-            key={name}
-            title={
-              <div className="flex items-center space-x-2">
-                {icon}
-                <span>{label || name}</span>
-              </div>
-            }
-          >
-            <Snippet
-              disableTooltip
-              fullWidth
-              hideSymbol
-              classNames={{
-                base: "bg-code-background text-code-foreground",
-                pre: "font-light text-base",
-                copyButton: "text-lg text-zinc-500 mr-2",
-              }}
+          return (
+            <Tab
+              key={name}
+              title={
+                <div className="flex items-center space-x-2">
+                  {icon}
+                  <span>{label || name}</span>
+                </div>
+              }
             >
-              <Codeblock removeIndent codeString={commands[name] as string} language="bash" />
-            </Snippet>
-          </Tab>
-        );
-      })}
-    </Tabs>
+              <Snippet
+                disableTooltip
+                fullWidth
+                hideSymbol
+                classNames={{
+                  base: "bg-code-background text-code-foreground",
+                  pre: "font-light text-base",
+                  copyButton: "text-lg text-zinc-500 mr-2",
+                }}
+              >
+                <Codeblock removeIndent codeString={commands[name] as string} language="bash" />
+              </Snippet>
+            </Tab>
+          );
+        })}
+      </Tabs>
+      {showGlobalInstallWarning && (
+        <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

@@ -1,14 +1,14 @@
 "use client";
 
 import NextLink from "next/link";
-import {Button, Link, Chip} from "@nextui-org/react";
+import {Button, Link, Chip, Snippet} from "@nextui-org/react";
 import {ArrowRightIcon} from "@nextui-org/shared-icons";
 import dynamic from "next/dynamic";
 
 import {FloatingComponents} from "./floating-components";
 
-import {title, subtitle} from "@/components/primitives";
 import {GithubIcon} from "@/components/icons";
+import {title, subtitle} from "@/components/primitives";
 import {trackEvent} from "@/utils/va";
 
 const BgLooper = dynamic(() => import("./bg-looper").then((mod) => mod.BgLooper), {
@@ -35,11 +35,11 @@ export const Hero = () => {
             color="default"
             href="/blog/v2.3.0"
             variant="dot"
-            onClick={() => handlePressAnnouncement("Introducing v2.3.0", "/blog/v2.3.0")}
+            onClick={() => handlePressAnnouncement("New version v2.4.0", "/blog/v2.4.0")}
           >
-            Introducing v2.3.0 
-            <span aria-label="tada emoji" role="img">
-              🎉
+            New version v2.4.0&nbsp;
+            <span aria-label="emoji" role="img">
+              🚀
             </span>
           </Chip>
         </div>
@@ -56,7 +56,7 @@ export const Hero = () => {
         <div className="flex flex-col md:flex-row items-center gap-4">
           <Button
             as={NextLink}
-            className="w-full md:w-auto"
+            className="w-full md:h-11 md:w-auto"
             color="primary"
             endContent={
               <ArrowRightIcon
@@ -78,12 +78,27 @@ export const Hero = () => {
           >
             Get Started
           </Button>
-
+          <Snippet
+            className="w-full rounded-full hidden md:flex sm:w-auto"
+            copyButtonProps={{
+              radius: "full",
+            }}
+            onCopy={() => {
+              trackEvent("Hero - Copy Install Command", {
+                name: "Copy",
+                action: "click",
+                category: "landing-page",
+                data: "npx nextui-cli@latest init",
+              });
+            }}
+          >
+            npx nextui-cli@latest init
+          </Snippet>
           <Button
             fullWidth
             isExternal
             as={Link}
-            className="w-full md:w-auto"
+            className="w-full md:hidden"
             href="https://github.com/nextui-org/nextui"
             radius="full"
             size="lg"
@@ -98,7 +113,7 @@ export const Hero = () => {
               });
             }}
           >
-            Github
+            GitHub
           </Button>
         </div>
       </div>

apps/docs/components/marketing/sponsors.tsx

@@ -1,27 +1,26 @@
 import {Button, Link} from "@nextui-org/react";
 
 import {sectionWrapper} from "@/components/primitives";
-import {RelumeLogo, 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: "Relume",
-    href: "https://library.relume.io/ai-site-builder?via=nextui",
-    logo: <RelumeLogo className="text-black dark:text-white" />,
-  },
   {
     name: "story.to.design",
     href: "https://story.to.design?utm_source=nextui&utm_marketing=partnership",
     logo: <Story2DesignLogo className="pt-1" />,
   },
   {
-    name: "Vercel",
-    href: "https://www.vercel.com?utm_source=nextui&utm_marketing=oss",
-    logo: <VercelIcon className="text-black dark:text-white" height={24} />,
+    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 />,
   },
 ];
 

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>
@@ -312,13 +312,13 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
             as={NextLink}
             className="bg-default-100/50 hover:bg-default-100 border-default-200/80 dark:border-default-100/80 transition-colors cursor-pointer"
             color="default"
-            href="/blog/v2.3.0"
+            href="/blog/v2.4.0"
             variant="dot"
-            onClick={() => handlePressNavbarItem("Introducing v2.3.0", "/blog/v2.3.0")}
+            onClick={() => handlePressNavbarItem("New version v2.4.0", "/blog/v2.4.0")}
           >
-            Introducing v2.3.0&nbsp;
-            <span aria-label="tada emoji" role="img">
-              🎉
+            New version v2.4.0&nbsp;
+            <span aria-label="emoji" role="img">
+              🚀
             </span>
           </Chip>
         </NavbarItem>

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,11 +144,24 @@
           "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",
           "keywords": "badge, markers, status indication, count display",
-          "path": "/docs/components/badge.mdx"
+          "path": "/docs/components/badge.mdx",
+          "updated": true
+        },
+        {
+          "key": "breadcrumbs",
+          "title": "Breadcrumbs",
+          "keywords": "breadcrumbs, navigation, path, trail, location",
+          "path": "/docs/components/breadcrumbs.mdx"
         },
         {
           "key": "button",
@@ -163,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",
@@ -178,7 +186,8 @@
           "key": "checkbox",
           "title": "Checkbox",
           "keywords": "checkbox, binary choice, selection control, toggle",
-          "path": "/docs/components/checkbox.mdx"
+          "path": "/docs/components/checkbox.mdx",
+          "updated": true
         },
         {
           "key": "checkbox-group",
@@ -192,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",
@@ -225,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
         },
         {
@@ -270,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",
@@ -324,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",
@@ -334,7 +335,14 @@
           "key": "skeleton",
           "title": "Skeleton",
           "keywords": "skeleton, loading state, placeholder, content preview",
-          "path": "/docs/components/skeleton.mdx"
+          "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",
@@ -342,12 +350,6 @@
           "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",
@@ -366,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",
@@ -391,11 +387,19 @@
           "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",
           "keywords": "tooltip, hint, descriptive message, hover info",
-          "path": "/docs/components/tooltip.mdx"
+          "path": "/docs/components/tooltip.mdx",
+          "updated": true
         },
         {
           "key": "user",
@@ -415,13 +419,15 @@
           "key": "cli-api",
           "title": "NextUI CLI",
           "keywords": "api references, nextui, api, cli",
-          "path": "/docs/api-references/cli-api.mdx"
+          "path": "/docs/api-references/cli-api.mdx",
+          "updated": true
         },
         {
           "key": "nextui-provider",
           "title": "NextUI Provider",
           "keywords": "api references, nextui, api, nextui provider",
-          "path": "/docs/api-references/nextui-provider.mdx"
+          "path": "/docs/api-references/nextui-provider.mdx",
+          "updated": true
         }
       ]
     }

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/blog/v2.3.0.mdx

@@ -297,7 +297,9 @@ export function Providers({children}: ProvidersProps) {
 
 ## Breaking Changes
 
-In order to improve the performance and reduce the bundle size, we have removed the `units` creation from the 
+### Removal of the `units` creation
+
+To improve performance and reduce bundle size, we have removed the `units` creation from the 
 `nextui` plugin. [TailwindCSS v3.4](https://tailwindcss.com/blog/tailwindcss-v3-4) added support for `min-h-*` and `min-w-*` classes, so it is no longer needed.
 
 How to upgrade:
@@ -335,8 +337,28 @@ export const MyButton = () => {
 };
 ```
 
-That's it! Your project should now be using the latest version of TailwindCSS and NextUI.
+### Separation for `errorMessage` and `isInvalid`
 
+We are currently working on supporting multiple types of validation, including native HTML constraint validation, custom validation, and real-time validation. 
+Due to this reason, the requirements for displaying error messages have become more varied, and it is necessary to handle validation conditions separately from the `errorMessage`.
+
+How to upgrade:
+
+1. To display `errorMessage`, `isInvalid` must be set to `true`.
+
+```diff-jsx
+<Input
+  type="email"
+  label="Email"
+  variant="bordered"
+  defaultValue="junior2nextui.org"
++ isInvalid={true}
+  errorMessage="Please enter a valid email"
+  className="max-w-xs"
+/>
+```
+
+That's it! Your project should now be using the latest version of TailwindCSS and NextUI.
 
 <Spacer y={4} />
 

apps/docs/content/blog/v2.4.0.mdx

@@ -0,0 +1,347 @@
+---
+title: "Introducing v2.4.0"
+description: "NextUI v2.4.0 is here! includes tons of bug fixes, the possibility to globally disable the animations and improvements."
+date: "2024-05-27"
+image: "/blog/v2.4.0.jpg"
+tags: ["nextui", "v2.4.0", "release", "bug fixes", "improvements", "animations"]
+author:
+  name: "WK Wong"
+  username: "@wingkwong"
+  link: "https://github.com/wingkwong"
+  avatar: "https://avatars.githubusercontent.com/u/35857179?v=4"
+---
+
+<img
+  src="/blog/v2.4.0_2x.jpg"
+  width={700}
+  height={350}
+  alt="NextUI v2.4.0"
+  className="w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"
+/>
+
+We are excited to announce the latest update to NextUI, version **2.4.0**! This release introduces 60+ bug fixes, dependencies upgrades, improvements in API and CLI and more.
+
+## What's New in v2.4.0?
+
+- [Disable Animations Globally](#disable-animations-globally) - Allows users to disable animation globally via NextUIProvider
+- [API Improvements](#api-improvements) - Includes several props like `disableRipple`, `skipFramerMotionAnimations` and `validationBehavior`
+- [CLI Improvements](#cli-improvements) - Includes new command options and optimizes performance
+- [React Aria Packages Upgrades](#react-aria-packages-upgrades) - Upgrades and fixes the exact versions of React Aria
+- [Other Changes](#other-changes) - Includes styling improvements, accessibility, usability enhancements and over 60 bug fixes across different component packages
+
+<Spacer y={4} />
+
+Upgrade today by running one of the following commands:
+
+<Spacer y={4} />
+
+<PackageManagers
+  commands={{
+    cli: "nextui upgrade",
+    npm: "npx nextui-cli@latest upgrade",
+  }}
+/>
+
+
+<Spacer y={4} />
+
+## Disable Animations Globally
+
+NextUI components are animated by default and can be disabled by setting the prop `disableAnimation` individually. Since v2.4.0, you can globally disable the animation by setting `disableAnimation` to `NextUIProvider`.
+
+```tsx
+"use client";
+
+import {type ReactNode} from "react";
+import {NextUIProvider} from "@nextui-org/react";
+
+export function AppProvider(props: AppProviderProps) {
+  const {children, className} = props;
+
+  return (
+    <NextUIProvider className={className} disableAnimation>
+      {children}
+    </NextUIProvider>
+  );
+}
+
+interface AppProviderProps {
+  children: ReactNode;
+  className?: string;
+}
+```
+
+<Spacer y={4} />
+
+## API Improvements
+
+### disableRipple
+
+By default, there is a ripple effect on press in Button and Card component and can be disabled by setting the prop `disableRipple` individually. Since v2.4.0, it can be disabled globally by setting `disableRipple` to `NextUIProvider`.
+
+```tsx
+"use client";
+
+import {type ReactNode} from "react";
+import {NextUIProvider} from "@nextui-org/react";
+
+export function AppProvider(props: AppProviderProps) {
+  const {children, className} = props;
+
+  return (
+    <NextUIProvider className={className} disableRipple>
+      {children}
+    </NextUIProvider>
+  );
+}
+
+interface AppProviderProps {
+  children: ReactNode;
+  className?: string;
+}
+```
+
+### skipFramerMotionAnimations
+
+We can control whether `framer-motion` animations are skipped within the application. This property is automatically enabled (`true`) when the `disableAnimation` prop is set to `true`, effectively skipping all `framer-motion` animations. To retain `framer-motion` animations while using the `disableAnimation` prop for other purposes, set this to `false`. However, note that animations in NextUI Components are still omitted if the `disableAnimation` prop is `true`.
+
+```tsx
+"use client";
+
+import {type ReactNode} from "react";
+import {NextUIProvider} from "@nextui-org/react";
+
+export function AppProvider(props: AppProviderProps) {
+  const {children, className} = props;
+
+  return (
+    <NextUIProvider className={className} skipFramerMotionAnimations>
+      {children}
+    </NextUIProvider>
+  );
+}
+
+interface AppProviderProps {
+  children: ReactNode;
+  className?: string;
+}
+```
+
+### validationBehavior
+
+We can set `validationBehavior` to either `native` or `aria` to control whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. If it is not specified, `aria` will be used by default.
+
+```tsx
+"use client";
+
+import {type ReactNode} from "react";
+import {NextUIProvider} from "@nextui-org/react";
+
+export function AppProvider(props: AppProviderProps) {
+  const {children, className} = props;
+
+  return (
+    <NextUIProvider className={className} validationBehavior="native">
+      {children}
+    </NextUIProvider>
+  );
+}
+
+interface AppProviderProps {
+  children: ReactNode;
+  className?: string;
+}
+```
+
+<Spacer y={4} />
+
+## CLI Improvements
+
+### Refactor Init Flow View
+
+We've refactored the init flow view to provide a better user experience.
+
+The latest flow view output:
+
+```bash
+┌  Create a new project
+│
+◇  Select a template (Enter to select)
+│  ● App (A Next.js 14 with app directory template pre-configured with NextUI (v2) and Tailwind CSS.)
+│  ○ Pages (A Next.js 14 with pages directory template pre-configured with NextUI (v2) and Tailwind CSS.)
+│  ○ Vite (A Vite template pre-configured with NextUI (v2) and Tailwind CSS.)
+│
+◇  New project name (Enter to skip with default name)
+│  my-nextui-app
+│
+◇  Select a package manager (Enter to select)
+│  ● npm
+│  ○ yarn
+│  ○ pnpm
+│  ○ bun
+│
+◇  Template created successfully!
+│
+◇  Next steps ───────╮
+│                    │
+│  cd my-nextui-app  │
+│  npm install       │
+│                    │
+├────────────────────╯
+│
+└  🚀 Get started with npm run dev
+```
+
+### Add Vite Template
+
+We've introduced a new Vite template pre-configured with NextUI v2 and TailwindCSS. The following command is to initialize a new Vite project named `my-vite-app`.
+
+```bash
+nextui init my-vite-app -t vite
+```
+
+### Package Manager Flag
+
+We've introduced a new flag `-p` (or `--package`) to init command to allow users to choose the package manager to use for the new project. By default, `npm` is used. For example, the following command will initialize a new NextUI project with the app template named my-nextui-app using pnpm package manager.
+
+```bash
+nextui init my-nextui-app -t app -p pnpm
+```
+
+### no-cache Flag
+
+We've introduced a new flag `--no-cache` to allow users to disable the cache. By default, the data will be cached for 30 mins after the first request. It is useful when the data is cached, and you wish to upgrade to the new version just released after the first request. In this way, you can run the following command
+
+```bash
+nextui --no-cache upgrade
+```
+
+### Upgrade Version Output
+
+You can now run the upgrade command and see the summary version of the package you are upgrading to.
+
+![image](https://github.com/nextui-org/nextui-cli/assets/96854855/2a5945dd-5187-4e20-81b8-4136e9791dde)
+
+### Upgrade And Remove Select View Optimization
+
+The disabled option(s) will be displayed in the bottom of the list.
+
+![image](https://github.com/nextui-org/nextui-cli/assets/96854855/c7ddf9e4-3054-4bf1-b8e3-dc2f6226091a)
+
+### Doctor Command add peerDependencies check
+
+The `doctor` command now checks for peerDependencies and displays the incorrect peerDependencies. (See [nextui-org/nextui#2954](https://github.com/nextui-org/nextui/issues/2954) for more).
+
+<Spacer y={4} />
+
+## React Aria Packages Upgrades
+
+We've upgraded and fixed React Aria packages dependencies across our components. This update focuses on enhancing accessibility, ensuring better compatibility with the latest versions of React Aria, and resolving previously reported bugs.
+
+<Spacer y={4} />
+
+## Breaking Changes
+
+### Export improved `cn` utility
+
+> If you are using it from `@nextui-org/react`, no changes are required.
+
+The new `cn` utility exported from the `@nextui-org/theme` package includes `tailwind-merge` to avoid conflicts between tailwindcss classes overrides and includes the config for NextUI custom classes.
+
+If you are using the `cn` utility from the `@nextui-org/system`, 
+
+```diff-tsx
+-import {cn} from "@nextui-org/system"
+```
+
+or `@nextui-org/system-rsc` package,
+
+```diff-tsx
+-import {cn} from "@nextui-org/system-rsc"
+```
+
+you need to update the import as follows:
+
+```diff-tsx
++ import {cn} from "@nextui-org/theme"
+```
+
+<Spacer y={4} />
+
+### Validation Behavior
+
+Since v2.4.0, we've changed the default validation behavior to `aria` which means no native validation is applied. If you wish to use the native validation, you can set `validationBehavior` to `native` to the input components or set it to the Provider as stated above.
+
+For those who use `validationBehavior="aria"`, `validate` will be no longer applied since it is only for native validation. Therefore, you need to switch to use `isInvalid` prop instead.
+
+```tsx
+<form onSubmit={onSubmit}>
+  <Input errorMessage={formErrors?.field1} isInvalid={!!formErrors?.field1} name="field1" />
+  <Button type="submit">Submit</Button>
+</form>
+```
+
+<Spacer y={4} />
+
+## Other Changes
+
+**Bug Fixes**:
+
+- Fixed popover-based focus behaviours. [PR](https://github.com/nextui-org/nextui/pull/2889) - [@wingkwong](https://github.com/wingkwong)
+- Fixed missing ref to input wrapper. [PR](https://github.com/nextui-org/nextui/pull/3008) - [@wingkwong](https://github.com/wingkwong)
+- Fixed react-hook-form uncontrolled switch component. [PR](https://github.com/nextui-org/nextui/pull/3008) - [@wingkwong](https://github.com/wingkwong)
+- Fixed focus on the first item when pressing Space / Enter key on dropdown menu open. [PR](https://github.com/nextui-org/nextui/pull/2970) - [@wingkwong](https://github.com/wingkwong)
+- Fixed inputting spaces in textarea inside a Table row. [PR](https://github.com/nextui-org/nextui/pull/3020) - [@wingkwong](https://github.com/wingkwong)
+- Fixed incorrect tailwind classnames. [PR](https://github.com/nextui-org/nextui/pull/3018) - [@wingkwong](https://github.com/wingkwong)
+- Fixed onSelectionChange can handle number [PR](https://github.com/nextui-org/nextui/pull/2937) - [@ryo-manba](https://github.com/ryo-manba)
+- Fixed update type definition to prevent primitive values as items [PR](https://github.com/nextui-org/nextui/pull/2938) - [@ryo-manba](https://github.com/ryo-manba)
+- Fixed display placeholder text when unselected for controlled. [PR](https://github.com/nextui-org/nextui/pull/3081) - [@ryo-manba](https://github.com/ryo-manba)
+- Fixed the inert attribute in `CalendarMonth` and `CalendarPicker`. [PR](https://github.com/nextui-org/nextui/pull/3054) - [@ShrinidhiUpadhyaya](https://github.com/ShrinidhiUpadhyaya)
+- Fixed hiding of unavailable dates in RangeCalendar. [PR](https://github.com/nextui-org/nextui/pull/3054) - [@ShrinidhiUpadhyaya](https://github.com/ShrinidhiUpadhyaya)
+- Fixed calendar header controlled state on DatePicker. [PR](https://github.com/nextui-org/nextui/pull/2845) - [@chirokas](https://github.com/chirokas)
+- Fixed 'Tap to click' behavior on macOS for Accordion and Tab. [PR](https://github.com/nextui-org/nextui/pull/2725) - [@ericfabreu](https://github.com/ericfabreu)
+- Fixed incorrect margin on labels for RTL required inputs. [PR](https://github.com/nextui-org/nextui/pull/2781) - [@mrbadri](https://github.com/mrbadri)
+- Fixed a type error in the onKeyDown event handler for the menu component. [PR](https://github.com/nextui-org/nextui/pull/3064) - [@Gaic4o](https://github.com/Gaic4o)
+
+**Improvements**
+
+- Added `destroyInactiveTabPanel` prop for Tabs component. [PR](https://github.com/nextui-org/nextui/pull/2973) - [@wingkwong](https://github.com/wingkwong)
+- Added pointer-events-none to skeleton base. [PR](https://github.com/nextui-org/nextui/pull/2972) - [@wingkwong](https://github.com/wingkwong)
+- Revised isInvalid input styles. [PR](https://github.com/nextui-org/nextui/pull/3010) - [@wingkwong](https://github.com/wingkwong)
+- Revised slider styles. [PR](https://github.com/nextui-org/nextui/pull/2883) - [@wingkwong](https://github.com/wingkwong)
+- Removed unnecessary origin-bottom in button. [PR](https://github.com/nextui-org/nextui/pull/2990) - [@wingkwong](https://github.com/wingkwong)
+- Set overflow visible after skeleton loaded. [PR](https://github.com/nextui-org/nextui/pull/2986) - [@wingkwong](https://github.com/wingkwong)
+- Kept date picker style consistent for different variants. [PR](https://github.com/nextui-org/nextui/pull/2901) - [@wingkwong](https://github.com/wingkwong)
+- Calculated the correct value on mark click. [PR](https://github.com/nextui-org/nextui/pull/3017) - [@wingkwong](https://github.com/wingkwong)
+- Removed scrolling display during month change animation. [PR](https://github.com/nextui-org/nextui/pull/2949) - [@novsource](https://github.com/novsource)
+- Added the correct peerDep version [PR](https://github.com/nextui-org/nextui/pull/3014) - [@winchesHe](https://github.com/winchesHe)
+- Added missing export of TableRowProps type. [PR](https://github.com/nextui-org/nextui/pull/2866) - [@sapkra](https://github.com/sapkra)
+- Changed validationBehavior from native to aria by default, with the option to change via props. [PR](https://github.com/nextui-org/nextui/pull/2987) - [@ryo-manba](https://github.com/ryo-manba)
+- Made the VisuallyHidden elementType as span when the default parent element accepts only phrasing elements. [PR](https://github.com/nextui-org/nextui/pull/3013) - [@kosmotema](https://github.com/kosmotema)
+- Refactored the useScrollPosition hook to improve performance and stability by using useCallback for the handler function and useRef for throttleTimeout. [PR](https://github.com/nextui-org/nextui/pull/3049) - [@Gaic4o](https://github.com/Gaic4o)
+
+**Documentation**:
+- Updated documentation to reflect the new features and changes in the components, API references, and CLI.
+
+Special thanks to NextUI Team members [@kuri-sun](https://github.com/kuri-sun), [@ryo-manba](https://github.com/ryo-manba), 
+[@sudongyuer](https://github.com/sudongyuer), [@winchesHe](https://github.com/winchesHe), [@wingkwong](https://github.com/wingkwong), 
+[@tianenpang](https://github.com/tianenpang), [@smultar](https://github.com/smultar) and contributors for their contributions to this release.
+
+For a full list of changes, please refer to the [release notes](https://github.com/nextui-org/nextui/releases/tag/%40nextui-org%2Freact%402.4.0).
+
+<Spacer y={6} />
+
+Thanks for reading and happy coding! 🚀
+
+---
+
+## Community
+
+We're excited to see the community adopt NextUI, raise issues, and provide feedback.
+Whether it's a feature request, bug report, or a project to showcase, please get involved!
+
+<Community />
+
+## Contributing
+
+PR's on NextUI are always welcome, please see our [contribution guidelines](https://github.com/nextui-org/nextui/blob/main/CONTRIBUTING.md) to learn how you can contribute to this project.

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/card/blurred-footer.ts

@@ -11,7 +11,7 @@ export default function App() {
         alt="Woman listing to music"
         className="object-cover"
         height={200}
-        src="/images/hero-card.jpeg"
+        src="https://nextui.org/images/hero-card.jpeg"
         width={200}
       />
       <CardFooter className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">

apps/docs/content/components/card/blurred.ts

@@ -165,7 +165,7 @@ export default function App() {
               className="object-cover"
               height={200}
               shadow="md"
-              src="/images/album-cover.png"
+              src="https://nextui.org/images/album-cover.png"
               width="100%"
             />
           </div>

apps/docs/content/components/card/composition.ts

@@ -7,7 +7,7 @@ export default function App() {
     <Card className="max-w-[340px]">
       <CardHeader className="justify-between">
         <div className="flex gap-5">
-          <Avatar isBordered radius="full" size="md" src="/avatars/avatar-1.png" />
+          <Avatar isBordered radius="full" size="md" src="https://nextui.org/avatars/avatar-1.png" />
           <div className="flex flex-col gap-1 items-start justify-center">
             <h4 className="text-small font-semibold leading-none text-default-600">Zoey Lang</h4>
             <h5 className="text-small tracking-tight text-default-400">@zoeylang</h5>

apps/docs/content/components/card/cover-image.ts

@@ -12,7 +12,7 @@ export default function App() {
         removeWrapper
         alt="Card background"
         className="z-0 w-full h-full object-cover"
-        src="/images/card-example-4.jpeg"
+        src="https://nextui.org/images/card-example-4.jpeg"
       />
     </Card>
     <Card className="col-span-12 sm:col-span-4 h-[300px]">
@@ -24,7 +24,7 @@ export default function App() {
         removeWrapper
         alt="Card background"
         className="z-0 w-full h-full object-cover"
-        src="/images/card-example-3.jpeg"
+        src="https://nextui.org/images/card-example-3.jpeg"
       />
     </Card>
     <Card className="col-span-12 sm:col-span-4 h-[300px]">
@@ -36,7 +36,7 @@ export default function App() {
         removeWrapper
         alt="Card background"
         className="z-0 w-full h-full object-cover"
-        src="/images/card-example-2.jpeg"
+        src="https://nextui.org/images/card-example-2.jpeg"
       />
     </Card>
     <Card isFooterBlurred className="w-full h-[300px] col-span-12 sm:col-span-5">
@@ -48,7 +48,7 @@ export default function App() {
         removeWrapper
         alt="Card example background"
         className="z-0 w-full h-full scale-125 -translate-y-6 object-cover"
-        src="/images/card-example-6.jpeg"
+        src="https://nextui.org/images/card-example-6.jpeg"
       />
       <CardFooter className="absolute bg-white/30 bottom-0 border-t-1 border-zinc-100/50 z-10 justify-between">
         <div>
@@ -69,14 +69,14 @@ export default function App() {
         removeWrapper
         alt="Relaxing app background"
         className="z-0 w-full h-full object-cover"
-        src="/images/card-example-5.jpeg"
+        src="https://nextui.org/images/card-example-5.jpeg"
       />
       <CardFooter className="absolute bg-black/40 bottom-0 z-10 border-t-1 border-default-600 dark:border-default-100">
         <div className="flex flex-grow gap-2 items-center">
           <Image
             alt="Breathing app icon"
             className="rounded-full w-10 h-11 bg-black"
-            src="/images/breathing-app-icon.jpeg"
+            src="https://nextui.org/images/breathing-app-icon.jpeg"
           />
           <div className="flex flex-col">
             <p className="text-tiny text-white/60">Breathing App</p>

apps/docs/content/components/card/image.ts

@@ -12,7 +12,7 @@ export default function App() {
         <Image
           alt="Card background"
           className="object-cover rounded-xl"
-          src="/images/hero-card-complete.jpeg"
+          src="https://nextui.org/images/hero-card-complete.jpeg"
           width={270}
         />
       </CardBody>

apps/docs/content/components/checkbox/custom-check-icon.ts

@@ -1,11 +1,7 @@
-const HeartIcon = `export const HeartIcon = ({
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
+const HeartIcon = `export const HeartIcon = ({ size, height, width, ...props }) => {
+  // avoid passing non-DOM attributes to svg
+  const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props;
+
   return (
     <svg
       width={size || width || 24}
@@ -13,7 +9,7 @@ const HeartIcon = `export const HeartIcon = ({
       viewBox="0 0 24 24"
       fill='fill'
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...otherProps}
     >
       <path
         d="M12.62 20.81c-.34.12-.9.12-1.24 0C8.48 19.82 2 15.69 2 8.69 2 5.6 4.49 3.1 7.56 3.1c1.82 0 3.43.88 4.44 2.24a5.53 5.53 0 0 1 4.44-2.24C19.51 3.1 22 5.6 22 8.69c0 7-6.48 11.13-9.38 12.12Z"
@@ -25,6 +21,9 @@ const HeartIcon = `export const HeartIcon = ({
 `;
 
 const PlusIcon = `export const PlusIcon = ({ size, height, width, ...props }) => {
+  // avoid passing non-DOM attributes to svg
+  const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props;
+
   return (
     <svg
       width={size || width || 24}
@@ -32,7 +31,7 @@ const PlusIcon = `export const PlusIcon = ({ size, height, width, ...props }) =>
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...otherProps}
     >
       <path
         d="M6 12H18"

apps/docs/content/components/date-input/error-message-function.ts

@@ -0,0 +1,30 @@
+const App = `import {DateInput} from "@nextui-org/react";
+import {CalendarDate, parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateInput 
+        label={"Birth date"} 
+        defaultValue={parseDate("2024-04-04")} 
+        placeholderValue={new CalendarDate(1995, 11, 6)} 
+        description={"This is my birth date."}
+        isInvalid
+        errorMessage={(value) => {
+          if (value.isInvalid) {
+            return "Please enter a valid date.";
+          }
+        }}
+        className="max-w-xs"
+      />
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/date-input/index.ts

@@ -7,6 +7,7 @@ import labelPlacements from "./label-placements";
 import description from "./description";
 import startEndContent from "./start-end-content";
 import errorMessage from "./error-message";
+import errorMessageFunction from "./error-message-function";
 import controlled from "./controlled";
 import timeZones from "./time-zones";
 import granularity from "./granularity";
@@ -25,6 +26,7 @@ export const dateInputContent = {
   description,
   startEndContent,
   errorMessage,
+  errorMessageFunction,
   controlled,
   timeZones,
   granularity,

apps/docs/content/components/date-picker/disabled.ts

@@ -6,7 +6,7 @@ export default function App() {
         <DatePicker 
           label="Birth date"
           className="max-w-[284px]"
-          isReadOnly
+          isDisabled
         />
     </div>
   );

apps/docs/content/components/date-picker/error-message-function.ts

@@ -0,0 +1,26 @@
+const App = `import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker 
+        label="Birth date"
+        className="max-w-[284px]"
+        isInvalid
+        errorMessage={(value) => {
+          if (value.isInvalid) {
+            return "Please enter a valid date.";
+          }
+        }}
+      />
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/date-picker/granularity.ts

@@ -1,6 +1,5 @@
 const App = `import {DatePicker} from "@nextui-org/react";
 import {now, parseAbsoluteToLocal} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
 
 export default function App() {
   let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
@@ -34,7 +33,6 @@ export default function App() {
 
 const AppTs = `import {DatePicker} from "@nextui-org/react";
 import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
 
 export default function App() {
   let [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));

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

@@ -6,6 +6,7 @@ import variants from "./variants";
 import labelPlacements from "./label-placements";
 import description from "./description";
 import errorMessage from "./error-message";
+import errorMessageFunction from "./error-message-function";
 import withMonthAndYearPickers from "./with-month-and-year-pickers";
 import withTimeField from "./with-time-field";
 import selectorIcon from "./selector-icon";
@@ -28,6 +29,7 @@ export const datePickerContent = {
   labelPlacements,
   description,
   errorMessage,
+  errorMessageFunction,
   withMonthAndYearPickers,
   withTimeField,
   selectorIcon,

apps/docs/content/components/date-picker/time-zones.ts

@@ -1,4 +1,4 @@
-const AppTs = `import {DatePicker} from "@nextui-org/react";
+const App = `import {DatePicker} from "@nextui-org/react";
 import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
 
 export default function App() {
@@ -21,7 +21,7 @@ export default function App() {
 }`;
 
 const react = {
-  "/App.tsx": AppTs,
+  "/App.jsx": App,
 };
 
 export default {

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/error-message-function.ts

@@ -0,0 +1,30 @@
+const App = `import {DateRangePicker} from "@nextui-org/react";
+import {parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <DateRangePicker 
+      isInvalid
+      label="Stay duration" 
+      variant="bordered"
+      errorMessage={(value) => {
+        if (value.isInvalid) {
+          return "Please enter your stay duration";
+        }
+      }}
+      defaultValue={{
+        start: parseDate("2024-04-01"),
+        end: parseDate("2024-04-08"),
+      }}
+      className="max-w-xs"
+    />
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -6,6 +6,7 @@ import variants from "./variants";
 import labelPlacements from "./label-placements";
 import description from "./description";
 import errorMessage from "./error-message";
+import errorMessageFunction from "./error-message-function";
 import withTimeField from "./with-time-field";
 import selectorIcon from "./selector-icon";
 import controlled from "./controlled";
@@ -18,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,
@@ -28,6 +30,7 @@ export const dateRangePickerContent = {
   labelPlacements,
   description,
   errorMessage,
+  errorMessageFunction,
   withTimeField,
   selectorIcon,
   controlled,
@@ -40,4 +43,5 @@ export const dateRangePickerContent = {
   pageBehavior,
   nonContigous,
   presets,
+  customStyles,
 };

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

@@ -1,6 +1,6 @@
 const App = `import {DateRangePicker, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react";
-import {today, startOfWeek, startOfMonth, endOfWeek, endOfMonth, useDateFormatter, getLocalTimeZone} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
+import {today, startOfWeek, startOfMonth, endOfWeek, endOfMonth, getLocalTimeZone} from "@internationalized/date";
+import {useLocale, useDateFormatter} from "@react-aria/i18n";
 
 export default function App() {
   let defaultDate = {
@@ -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/custom-styles.ts

@@ -52,8 +52,8 @@ export default function App() {
             "backdrop-saturate-200",
             "hover:bg-default-200/70",
             "dark:hover:bg-default/70",
-            "group-data-[focused=true]:bg-default-200/50",
-            "dark:group-data-[focused=true]:bg-default/60",
+            "group-data-[focus=true]:bg-default-200/50",
+            "dark:group-data-[focus=true]:bg-default/60",
             "!cursor-text",
           ],
         }}

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/input/regex-validation.ts

@@ -3,7 +3,7 @@ const App = `import {Input} from "@nextui-org/react";
 export default function App() {
   const [value, setValue] = React.useState("junior2nextui.org");
 
-  const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i);
+  const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
 
   const isInvalid = React.useMemo(() => {
     if (value === "") return false;
@@ -19,7 +19,7 @@ export default function App() {
       variant="bordered"
       isInvalid={isInvalid}
       color={isInvalid ? "danger" : "success"}
-      errorMessage={isInvalid && "Please enter a valid email"}
+      errorMessage="Please enter a valid email"
       onValueChange={setValue}
       className="max-w-xs"
     />

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/colors.ts

@@ -1,29 +1,17 @@
 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"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -51,7 +39,7 @@ export default function App() {
           className="max-w-xs"
         >
           {animals.map((animal) => (
-            <SelectItem key={animal.value} value={animal.value}>
+            <SelectItem key={animal.key}>
               {animal.label}
             </SelectItem>
           ))}

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-selector-icon.ts

@@ -1,29 +1,17 @@
 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"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const SelectorIcon = `export const SelectorIcon = (props) => (
@@ -62,7 +50,7 @@ export default function App() {
       selectorIcon={<SelectorIcon />}
     >
       {animals.map((animal) => (
-        <SelectItem key={animal.value} value={animal.value}>
+        <SelectItem key={animal.key}>
           {animal.label}
         </SelectItem>
       ))}

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/description.ts

@@ -1,29 +1,17 @@
 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"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -39,7 +27,7 @@ export default function App() {
       className="max-w-xs"
     >
       {animals.map((animal) => (
-        <SelectItem key={animal.value} value={animal.value}>
+        <SelectItem key={animal.key}>
           {animal.label}
         </SelectItem>
       ))}

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

@@ -1,29 +1,17 @@
 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"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -38,7 +26,7 @@ export default function App() {
       className="max-w-xs"
     >
       {animals.map((animal) => (
-        <SelectItem key={animal.value} value={animal.value}>
+        <SelectItem key={animal.key}>
           {animal.label}
         </SelectItem>
       ))}

apps/docs/content/components/select/disabled.ts

@@ -1,29 +1,17 @@
 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"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -39,7 +27,7 @@ export default function App() {
       className="max-w-xs"
     >
       {animals.map((animal) => (
-        <SelectItem key={animal.value} value={animal.value}>
+        <SelectItem key={animal.key}>
           {animal.label}
         </SelectItem>
       ))}

apps/docs/content/components/select/dynamic.ts

@@ -1,29 +1,17 @@
 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"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -37,7 +25,7 @@ export default function App() {
       placeholder="Select an animal"
       className="max-w-xs"
     >
-      {(animal) => <SelectItem key={animal.value}>{animal.label}</SelectItem>}
+      {(animal) => <SelectItem>{animal.label}</SelectItem>}
     </Select>
   );
 }`;

apps/docs/content/components/select/error-message.ts

@@ -1,29 +1,17 @@
 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"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -49,7 +37,7 @@ export default function App() {
       onClose={() => setTouched(true)}
     >
       {animals.map((animal) => (
-        <SelectItem key={animal.value} value={animal.value}>
+        <SelectItem key={animal.key}>
           {animal.label}
         </SelectItem>
       ))}

apps/docs/content/components/select/label-placements.ts

@@ -1,29 +1,17 @@
 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"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -48,7 +36,7 @@ export default function App() {
               className="max-w-xs"
             >
               {animals.map((animal) => (
-                <SelectItem key={animal.value} value={animal.value}>
+                <SelectItem key={animal.key}>
                   {animal.label}
                 </SelectItem>
               ))}
@@ -67,7 +55,7 @@ export default function App() {
               className="max-w-xs"
             >
               {animals.map((animal) => (
-                <SelectItem key={animal.value} value={animal.value}>
+                <SelectItem key={animal.key}>
                   {animal.label}
                 </SelectItem>
               ))}

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/select/multiple-controlled-onchange.ts

@@ -1,29 +1,17 @@
 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"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -47,7 +35,7 @@ export default function App() {
         onChange={handleSelectionChange}
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}
@@ -78,7 +66,7 @@ export default function App() {
         onChange={handleSelectionChange}
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}

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

@@ -1,29 +1,17 @@
 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"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -43,7 +31,7 @@ export default function App() {
         onSelectionChange={setValues}
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}
@@ -70,7 +58,7 @@ export default function App() {
         onSelectionChange={setValues}
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}

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

@@ -1,29 +1,17 @@
 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"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -38,7 +26,7 @@ export default function App() {
       className="max-w-xs"
     >
       {animals.map((animal) => (
-        <SelectItem key={animal.value} value={animal.value}>
+        <SelectItem key={animal.key}>
           {animal.label}
         </SelectItem>
       ))}

apps/docs/content/components/select/open-state.ts

@@ -1,29 +1,17 @@
 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"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem, Button} from "@nextui-org/react";
@@ -43,7 +31,7 @@ export default function App() {
         className="max-w-xs"
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}

apps/docs/content/components/select/radius.ts

@@ -1,29 +1,17 @@
 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"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -50,7 +38,7 @@ export default function App() {
           className="max-w-[45%]"
         >
           {animals.map((animal) => (
-            <SelectItem key={animal.value} value={animal.value}>
+            <SelectItem key={animal.key}>
               {animal.label}
             </SelectItem>
           ))}

apps/docs/content/components/select/required.ts

@@ -1,29 +1,17 @@
 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"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -39,7 +27,7 @@ export default function App() {
       className="max-w-xs"
     >
       {animals.map((animal) => (
-        <SelectItem key={animal.value} value={animal.value}>
+        <SelectItem key={animal.key}>
           {animal.label}
         </SelectItem>
       ))}

apps/docs/content/components/select/single-controlled-onchange.ts

@@ -1,29 +1,17 @@
 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"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -47,7 +35,7 @@ export default function App() {
         onChange={handleSelectionChange}
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}
@@ -78,7 +66,7 @@ export default function App() {
         onChange={handleSelectionChange}
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}

apps/docs/content/components/select/single-controlled.ts

@@ -1,29 +1,17 @@
 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"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const AppTs = `import {Select, SelectItem, Selection} from "@nextui-org/react";
@@ -43,7 +31,7 @@ export default function App() {
         onSelectionChange={setValue}
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}
@@ -70,7 +58,7 @@ export default function App() {
         onSelectionChange={setValue}
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}

apps/docs/content/components/select/sizes.ts

@@ -1,29 +1,17 @@
 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"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -42,7 +30,7 @@ export default function App() {
             className="max-w-xs" 
           >
             {animals.map((animal) => (
-              <SelectItem key={animal.value} value={animal.value}>
+              <SelectItem key={animal.key}>
                 {animal.label}
               </SelectItem>
             ))}
@@ -54,7 +42,7 @@ export default function App() {
             className="max-w-xs"
           >
             {animals.map((animal) => (
-              <SelectItem key={animal.value} value={animal.value}>
+              <SelectItem key={animal.key}>
                 {animal.label}
               </SelectItem>
             ))}

apps/docs/content/components/select/start-content.ts

@@ -1,29 +1,17 @@
 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"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const PetIcon = `export const PetIcon = (props) => (
@@ -67,20 +55,19 @@ import {animals} from "./data";
 export default function App() {
   return (
     <Select
+      className="max-w-xs"
+      defaultSelectedKeys={["cat"]}
       label="Favorite Animal"
       placeholder="Select an animal"
       startContent={<PetIcon />}
-      defaultSelectedKeys={["cat"]}
-      className="max-w-xs"
     >
       {animals.map((animal) => (
-        <SelectItem key={animal.value} value={animal.value}>
-          {animal.label}
-        </SelectItem>
+        <SelectItem key={animal.key}>{animal.label}</SelectItem>
       ))}
     </Select>
   );
-}`;
+}
+`;
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/select/usage.ts

@@ -1,29 +1,17 @@
 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"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -37,7 +25,7 @@ export default function App() {
         className="max-w-xs" 
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}
@@ -48,7 +36,7 @@ export default function App() {
         className="max-w-xs"
       >
         {animals.map((animal) => (
-          <SelectItem key={animal.value} value={animal.value}>
+          <SelectItem key={animal.key}>
             {animal.label}
           </SelectItem>
         ))}

apps/docs/content/components/select/variants.ts

@@ -1,29 +1,17 @@
 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"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -42,7 +30,7 @@ export default function App() {
             className="max-w-xs" 
           >
             {animals.map((animal) => (
-              <SelectItem key={animal.value} value={animal.value}>
+              <SelectItem key={animal.key}>
                 {animal.label}
               </SelectItem>
             ))}
@@ -54,7 +42,7 @@ export default function App() {
             className="max-w-xs"
           >
             {animals.map((animal) => (
-              <SelectItem key={animal.value} value={animal.value}>
+              <SelectItem key={animal.key}>
                 {animal.label}
               </SelectItem>
             ))}

apps/docs/content/components/select/without-scroll-shadow.ts

@@ -1,29 +1,17 @@
 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"},
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"}
 ];`;
 
 const App = `import {Select, SelectItem} from "@nextui-org/react";
@@ -41,7 +29,7 @@ export default function App() {
       }}
     >
       {animals.map((animal) => (
-        <SelectItem key={animal.value} value={animal.value}>
+        <SelectItem key={animal.key}>
           {animal.label}
         </SelectItem>
       ))}

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>