ci(changesets): version packages (#3266)

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

.eslintrc.json

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

.github/ISSUE_TEMPLATE/bug_report.yml

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

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

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

.github/workflows/QA.yaml

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

.github/workflows/release.yaml

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

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

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

.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

apps/docs/.sponsorsrc

@@ -308,5 +308,47 @@
     "twitter": null,
     "github": null,
     "website": "https://encur.me/"
+  },
+  {
+    "MemberId": 569973,
+    "createdAt": "2024-05-29 17:51",
+    "type": "USER",
+    "role": "BACKER",
+    "tier": "Gold Sponsor 🥇",
+    "isActive": true,
+    "totalAmountDonated": 100,
+    "currency": "USD",
+    "lastTransactionAt": "2024-05-29 17:51",
+    "lastTransactionAmount": 100,
+    "profile": "https://opencollective.com/maxprilutskiy",
+    "name": "Replexica",
+    "company": "",
+    "description": null,
+    "image": "/sponsors/569973.jpg",
+    "email": null,
+    "newsletterOptIn": null,
+    "twitter": null,
+    "github": null,
+    "website": "https://replexica.com/?utm_source=nextui&utm_marketing=oss"
+  },
+  {
+    "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/figma/page.tsx

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

apps/docs/app/layout.tsx

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

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

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

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

@@ -40,7 +40,6 @@ interface CodeDemoProps extends UseCodeDemoProps, WindowResizerProps {
   displayMode?: "always" | "visible";
   isGradientBox?: boolean;
   gradientColor?: GradientBoxProps["color"];
-  defaultExpanded?: boolean;
   previewHeight?: string | number;
   overflow?: "auto" | "visible" | "hidden";
   className?: string;
@@ -61,7 +60,6 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
   typescriptStrict = false,
   showOpenInCodeSandbox,
   isGradientBox = false,
-  defaultExpanded = false,
   previewHeight = "auto",
   overflow = "visible",
   displayMode = "always",
@@ -138,7 +136,6 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
 
     const content = (
       <DynamicSandpack
-        defaultExpanded={defaultExpanded}
         files={files}
         highlightedLines={highlightedLines}
         showEditor={showEditor}
@@ -155,7 +152,6 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
     isInView,
     files,
     highlightedLines,
-    defaultExpanded,
     showPreview,
     showSandpackPreview,
     showOpenInCodeSandbox,

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

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

apps/docs/components/footer.tsx

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

apps/docs/components/icons/social.tsx

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

apps/docs/components/index.ts

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

apps/docs/components/marketing/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

@@ -67,7 +67,7 @@ export const FloatingComponents: React.FC<{}> = () => {
             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}
           />

apps/docs/components/marketing/sponsors.tsx

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

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/sonar-pulse.tsx

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

apps/docs/components/vercel-callout.tsx

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

apps/docs/config/routes.json

@@ -132,12 +132,6 @@
       "keywords": "interface elements, interactive components, UI components, widgets",
       "defaultOpen": true,
       "routes": [
-        {
-          "key": "avatar",
-          "title": "Avatar",
-          "keywords": "avatar, profile picture, user representation, identity",
-          "path": "/docs/components/avatar.mdx"
-        },
         {
           "key": "accordion",
           "title": "Accordion",
@@ -150,6 +144,12 @@
           "keywords": "autocomplete, auto suggest, search, typeahead",
           "path": "/docs/components/autocomplete.mdx"
         },
+        {
+          "key": "avatar",
+          "title": "Avatar",
+          "keywords": "avatar, profile picture, user representation, identity",
+          "path": "/docs/components/avatar.mdx"
+        },
         {
           "key": "badge",
           "title": "Badge",
@@ -157,6 +157,12 @@
           "path": "/docs/components/badge.mdx",
           "updated": true
         },
+        {
+          "key": "breadcrumbs",
+          "title": "Breadcrumbs",
+          "keywords": "breadcrumbs, navigation, path, trail, location",
+          "path": "/docs/components/breadcrumbs.mdx"
+        },
         {
           "key": "button",
           "title": "Button",
@@ -164,10 +170,11 @@
           "path": "/docs/components/button.mdx"
         },
         {
-          "key": "breadcrumbs",
-          "title": "Breadcrumbs",
-          "keywords": "breadcrumbs, navigation, path, trail, location",
-          "path": "/docs/components/breadcrumbs.mdx"
+          "key": "calendar",
+          "title": "Calendar",
+          "keywords": "calendar, date picker, month picker, year picker",
+          "path": "/docs/components/calendar.mdx",
+          "newPost": true
         },
         {
           "key": "card",
@@ -179,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",
@@ -193,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",
@@ -226,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
         },
         {
@@ -271,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",
@@ -325,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",
@@ -338,18 +338,18 @@
           "path": "/docs/components/skeleton.mdx",
           "updated": true
         },
+        {
+          "key": "slider",
+          "title": "Slider",
+          "keywords": "slider, range input, value selector, sliding control",
+          "path": "/docs/components/slider.mdx"
+        },
         {
           "key": "snippet",
           "title": "Snippet",
           "keywords": "snippet, code block, programming, code example",
           "path": "/docs/components/snippet.mdx"
         },
-        {
-          "key": "scroll-shadow",
-          "title": "Scroll Shadow",
-          "keywords": "scroll shadow, scroll indicator, scroll bar, scroll position",
-          "path": "/docs/components/scroll-shadow.mdx"
-        },
         {
           "key": "spacer",
           "title": "Spacer",
@@ -368,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",
@@ -393,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",

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.4.0.mdx

@@ -230,7 +230,7 @@ The disabled option(s) will be displayed in the bottom of the list.
 
 ### Doctor Command add peerDependencies check
 
-The `doctor` command now checks for peerDependencies and displays the incorrect peerDependencies, relation: [nextui-org/nextui#2954](https://github.com/nextui-org/nextui/issues/2954).
+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} />
 
@@ -268,6 +268,20 @@ you need to update the import as follows:
 
 <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
 

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/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/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-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/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;

apps/docs/content/components/tabs/placement.ts

@@ -7,7 +7,6 @@ export default function App() {
       <RadioGroup
         className="mb-4"
         label="Placement"
-        orientation="top"
         value={placement}
         onValueChange={(value) => setPlacement(value)}
       >

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

@@ -0,0 +1,23 @@
+const App = `import {TimeInput} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <TimeInput 
+      label="Event Time"
+      isInvalid
+      errorMessage={(value) => {
+        if (value.isInvalid) {
+          return "Please enter a valid time";
+        }
+      }}
+    />
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/time-input/error-message.ts

@@ -0,0 +1,19 @@
+const App = `import {TimeInput} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <TimeInput 
+      label="Event Time"
+      isInvalid
+      errorMessage="Please enter a valid time"
+    />
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -4,6 +4,8 @@ import disabled from "./disabled";
 import readonly from "./read-only";
 import withoutLabel from "./without-label";
 import withDescription from "./with-description";
+import errorMessage from "./error-message";
+import errorMessageFunction from "./error-message-function";
 import labelPlacement from "./label-placement";
 import startContent from "./start-content";
 import endContent from "./end-content";
@@ -23,6 +25,8 @@ export const timeInputContent = {
   readonly,
   withoutLabel,
   withDescription,
+  errorMessage,
+  errorMessageFunction,
   labelPlacement,
   startContent,
   endContent,

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

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

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

@@ -238,6 +238,12 @@ You can customize the autocomplete items by modifying the `AutocompleteItem` chi
 
 <CodeDemo title="Custom Items" files={autocompleteContent.customItems} />
 
+### Custom Empty Content Message
+
+By default, a message `No results found.` will be shown if there is no result matching a query with your filter. You can customize the empty content message by modifying the `emptyContent` in `listboxProps`.
+
+<CodeDemo title="Custom Empty Content Message" files={autocompleteContent.customEmptyContentMessage} />
+
 ### Custom Filtering
 
 By default, `Autocomplete` uses a `"contains"` function from [useFilter](https://react-spectrum.adobe.com/react-aria/useFilter.html) to filter the
@@ -254,7 +260,7 @@ The following example uses the `defaultFilter` prop to filter the list of option
 
 ### Asynchronous Filtering
 
-Autocomplete supports asynchronous filtering, in the example below we are using the [useAyncList](https://react-spectrum.adobe.com/react-stately/useAsyncList.html) function
+Autocomplete supports asynchronous filtering, in the example below we are using the [useAsyncList](https://react-spectrum.adobe.com/react-stately/useAsyncList.html) function
 from [react-aria](https://react-spectrum.adobe.com) to handle asynchronous loading and filtering of data from a server.
 
 <PackageManagers

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

@@ -150,7 +150,7 @@ You can customize any part of the avatar by using the `classNames` prop, each `s
 
 <CodeDemo title="Custom Avatar" files={avatarContent.custom} />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -163,7 +163,7 @@ You can customize any part of the avatar by using the `classNames` prop, each `s
 - **data-focus-visible**:
   When the avatar is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html), it is applied when `isFocusable` is `true` or when the `as` property is assigned as `button`.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

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

@@ -109,7 +109,7 @@ In case you need to customize the checkbox even further, you can use the `useChe
 | validationState    | `valid` \| `invalid`                                                        | Whether the inputs should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead.                                        | -          |
 | description        | `ReactNode`                                                                 | The checkbox group description.                                                                                                                               | -          |
 | errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                       | The checkbox group error message.                                                                                                                             | -          |
-| validate           | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined`          | Validate input values when committing (e.g. on blur), and return error messages for invalid values.                                                           | -          |
+| validate           | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined`          | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -          |
 | validationBehavior | `native` \| `aria`                                                          | 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.| `aria`     |
 | isDisabled         | `boolean`                                                                   | Whether the checkbox group is disabled.                                                                                                                       | `false`    |
 | isRequired         | `boolean`                                                                   | Whether user checkboxes are required on the input before form submission.                                                                                     | `false`    |

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

@@ -13,8 +13,6 @@ Checkboxes allow users to select multiple items from a list of individual items,
 
 ---
 
-
-
 ## Installation
 
 <PackageManagers
@@ -70,6 +68,8 @@ The `isIndeterminate` prop sets a `Checkbox` to an indeterminate state, overridi
 
 ### Custom Check Icon
 
+> By default, `IconProps` will be passed to your icon component.  Please make sure that `isSelected`, `isIndeterminate`, and `disableAnimation` are not passed to a DOM element.
+
 <CodeDemo title="Custom Check Icon" files={checkboxContent.customCheckIcon} />
 
 ### Controlled
@@ -127,7 +127,7 @@ In case you need to customize the checkbox even further, you can use the `useChe
 - **data-loading**:
   When the checkbox is loading. Based on `isLoading` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 

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

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

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

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

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

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

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

@@ -84,6 +84,10 @@ You can combine the `isInvalid` and `errorMessage` properties to show an invalid
 
 <CodeDemo title="With Error Message" files={dateInputContent.errorMessage} />
 
+You can also pass an error message as a function. This allows for dynamic error message handling based on the [ValidationResult]((https://github.com/adobe/react-spectrum/blob/1cacbf1d438675feb3859fee54b17e620b458d9c/packages/%40react-types/shared/src/inputs.d.ts#L44-L51)).
+
+<CodeDemo title="With Error Message Function" files={dateInputContent.errorMessageFunction} />
+
 ### Controlled
 
 You can use the `value` and `onChange` properties to control the input value.
@@ -243,7 +247,7 @@ import {parseZonedDateTime} from "@internationalized/date";
 - **description**: The description of the date-input.
 - **errorMessage**: The error message of the date-input.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -299,7 +303,7 @@ import {parseZonedDateTime} from "@internationalized/date";
 | locale                  | `string`                                                                                                                          | The locale to display and edit the value according to.                                                                                                        | -         |
 | description             | `ReactNode`                                                                                                                       | A description for the date input. Provides a hint such as specific requirements for what to choose.                                                           | -         |
 | errorMessage            | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                 | An error message for the date input.                                                                                                                          | -         |
-| validate                | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined`                                              | Validate input values when committing (e.g., on blur), and return error messages for invalid values.                                                          | -         |
+| validate                | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined`                                              | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -         |
 | validationBehavior      | `native` \| `aria`                                                                                                                | 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.| `aria`    |
 | startContent            | `ReactNode`                                                                                                                       | Element to be rendered in the left side of the date input.                                                                                                    | -         |
 | endContent              | `ReactNode`                                                                                                                       | Element to be rendered in the right side of the date input.                                                                                                   | -         |

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

@@ -77,6 +77,10 @@ You can combine the `isInvalid` and `errorMessage` properties to show an invalid
 
 <CodeDemo title="With Error Message" files={datePickerContent.errorMessage} />
 
+You can also pass an error message as a function. This allows for dynamic error message handling based on the [ValidationResult]((https://github.com/adobe/react-spectrum/blob/1cacbf1d438675feb3859fee54b17e620b458d9c/packages/%40react-types/shared/src/inputs.d.ts#L44-L51)).
+
+<CodeDemo title="With Error Message Function" files={datePickerContent.errorMessageFunction} />
+
 ### With Month and Year Pickers
 
 <CodeDemo title="With Month and Year Pickers" files={datePickerContent.withMonthAndYearPickers} />
@@ -266,7 +270,7 @@ import {I18nProvider} from "@react-aria/i18n";
 - **timeInputLabel**: The time-input component's label element.
 - **timeInput**: The time-input component element.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -285,7 +289,7 @@ import {I18nProvider} from "@react-aria/i18n";
 - **data-disabled**:
   When the date-picker is disabled. Based on `isDisabled` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -295,7 +299,7 @@ import {I18nProvider} from "@react-aria/i18n";
 - Date segments are editable using an easy to use numeric keypad, and all interactions are accessible using touch-based screen readers.
 - Integrates with HTML forms, supporting required, minimum and maximum values, unavailable dates, custom validation functions, realtime validation, and server-side validation errors
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 
@@ -313,7 +317,7 @@ import {I18nProvider} from "@react-aria/i18n";
 | placeholderValue        | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null`                                                                         | The placeholder of the date-picker.                                                                                                                           | -                                                                    |
 | description             | `ReactNode`                                                                                                                                              | A description for the date-picker. Provides a hint such as specific requirements for what to choose.                                                          | -                                                                    |
 | errorMessage            | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                        | An error message for the date input.                                                                                                                          | -                                                                    |
-| validate                | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined`                                                                     | Validate input values when committing (e.g., on blur), and return error messages for invalid values.                                                          | -                                                                    |
+| validate                | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined`                                                                     | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -                                                                    |
 | validationBehavior      | `native` \| `aria`                                                                                                                                       | 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.| `aria`                                                               |
 | startContent            | `ReactNode`                                                                                                                                              | Element to be rendered in the left side of the date-picker.                                                                                                   | -                                                                    |
 | endContent              | `ReactNode`                                                                                                                                              | Element to be rendered in the right side of the date-picker.                                                                                                  | -                                                                    |
@@ -342,6 +346,7 @@ import {I18nProvider} from "@react-aria/i18n";
 | timeInputProps          | `TimeInputProps`                                                                                                                                         | Props to be passed to the time input component.                                                                                                               | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
 | disableAnimation        | `boolean`                                                                                                                                                | Whether to disable all animations in the date picker. Including the DateInput, Button, Calendar, and Popover.                                                 | `false`                                                              |
 | classNames              | `Record<"base" \| "selectorButton" \| "selectorIcon" \| "popoverContent" \| "calendar" \| "calendarContent" \| "timeInputLabel" \| "timeInput", string>` | Allows to set custom class names for the date-picker slots.                                                                                                   | -                                                                    |
+| dateInputClassNames     | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper"｜ "input"｜ "helperWrapper"｜ "description"｜ "errorMessage", string>`                          | Allows to set custom class names for the [date input slots](/docs/components/date-input#slots).                                                               | -                                                                    |
 
 ### DatePicker Events
 

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

@@ -92,6 +92,10 @@ You can combine the `isInvalid` and `errorMessage` properties to show an invalid
 
 <CodeDemo title="With Error Message" files={dateRangePickerContent.errorMessage} />
 
+You can also pass an error message as a function. This allows for dynamic error message handling based on the [ValidationResult]((https://github.com/adobe/react-spectrum/blob/1cacbf1d438675feb3859fee54b17e620b458d9c/packages/%40react-types/shared/src/inputs.d.ts#L44-L51)).
+
+<CodeDemo title="With Error Message Function" files={dateRangePickerContent.errorMessageFunction} />
+
 ### With Time Fields
 
 DateRangePicker automatically includes time fields when a `CalendarDateTime` or `ZonedDateTime` object is provided as the value.
@@ -270,13 +274,11 @@ in multiple formats into `ZonedDateTime` objects.
 import {
   DateValue,
   now,
-  useLocale,
   startOfWeek,
   startOfMonth,
-  useDateFormatter,
   getLocalTimeZone,
 } from "@internationalized/date";
-import {I18nProvider} from "@react-aria/i18n";
+import {useLocale, useDateFormatter} from "@react-aria/i18n";
 ```
 
 <CodeDemo title="Presets" files={dateRangePickerContent.presets} />
@@ -300,6 +302,12 @@ import {I18nProvider} from "@react-aria/i18n";
 - **description**: The description of the date-input.
 - **errorMessage**: The error message of the date-input.
 
+### Custom Styles
+
+You can customize the `DateRangePicker` component by passing custom Tailwind CSS classes to the component slots.
+
+<CodeDemo title="Custom Styles" files={dateRangePickerContent.customStyles} />
+
 <Spacer y={4} />
 
 ## Data Attributes
@@ -354,7 +362,7 @@ import {I18nProvider} from "@react-aria/i18n";
 | placeholderValue          | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null`                                                                         | The placeholder of the date-range-picker.                                                                                                                               | -                                                                    |
 | description               | `ReactNode`                                                                                                                                              | A description for the date-range-picker. Provides a hint such as specific requirements for what to choose.                                                              | -                                                                    |
 | errorMessage              | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                        | An error message for the date input.                                                                                                                                    | -                                                                    |
-| validate                  | `(value: RangeValue<MappedDateValue<DateValue>>) => ValidationError ｜ true ｜ null ｜ undefined`                                                         | Validate input values when committing (e.g., on blur), and return error messages for invalid values.                                                                    | -                                                                    |
+| validate                  | `(value: RangeValue<MappedDateValue<DateValue>>) => ValidationError ｜ true ｜ null ｜ undefined`                                                         | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -                                                                    |
 | validationBehavior        | `native` \| `aria`                                                                                                                                       | 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.          | `aria`                                                               |
 | startContent              | `ReactNode`                                                                                                                                              | Element to be rendered in the left side of the date-range-picker.                                                                                                       | -                                                                    |
 | endContent                | `ReactNode`                                                                                                                                              | Element to be rendered in the right side of the date-range-picker.                                                                                                      | -                                                                    |

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

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

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

@@ -85,14 +85,14 @@ You can change the position of the label by setting the `labelPlacement` propert
 
 You can use the `type` property to change the input type to `password`.
 
-<CodeDemo title="Password Input" highlightedLines="24" files={inputContent.password} />
+<CodeDemo title="Password Input" highlightedLines="25" files={inputContent.password} />
 
 ### Clear Button
 
 If you pass the `isClearable` property to the input, it will have a clear button at the
 end of the input, it will be visible when the input has a value.
 
-<CodeDemo title="Clear Button" highlightedLines="6" files={inputContent.clearButton} />
+<CodeDemo title="Clear Button" highlightedLines="7" files={inputContent.clearButton} />
 
 ### Start & End Content
 
@@ -142,7 +142,7 @@ You can use the `value` and `onValueChange` properties to control the input valu
 
 You can customize the `Input` component by passing custom Tailwind CSS classes to the component slots.
 
-<CodeDemo title="Custom Styles" highlightedLines="14-32" files={inputContent.customStyles} />
+<CodeDemo title="Custom Styles" highlightedLines="13-31" files={inputContent.customStyles} />
 
 ### Custom Implementation
 
@@ -155,7 +155,7 @@ In case you need to customize the input even further, you can use the `useInput`
   files={inputContent.customImpl}
 />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -178,7 +178,7 @@ In case you need to customize the input even further, you can use the `useInput`
 - **data-disabled**:
   When the input is disabled. Based on `isDisabled` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -188,7 +188,7 @@ In case you need to customize the input even further, you can use the `useInput`
 - Required and invalid states exposed to assistive technology via ARIA.
 - Support for description and error message help text linked to the input via ARIA.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 
@@ -207,7 +207,7 @@ In case you need to customize the input even further, you can use the `useInput`
 | placeholder        | `string`                                                                                                                                                               | The placeholder of the input.                                                                                                                                 | -         |
 | description        | `ReactNode`                                                                                                                                                            | A description for the input. Provides a hint such as specific requirements for what to choose.                                                                | -         |
 | errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                                                                                                                  | An error message for the input. It is only shown when `isInvalid` is set to `true`                                                                            | -         |
-| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`                                                                                                       | Validate input values when committing (e.g. on blur), and return error messages for invalid values.                                                           | -         |
+| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`                                                                                                       | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -         |
 | validationBehavior | `native` \| `aria`                                                                                                                                                     | 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.| `aria`    |
 | startContent       | `ReactNode`                                                                                                                                                            | Element to be rendered in the left side of the input.                                                                                                         | -         |
 | endContent         | `ReactNode`                                                                                                                                                            | Element to be rendered in the right side of the input.                                                                                                        | -         |

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

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

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

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

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

@@ -100,7 +100,7 @@ In case you need to customize the radio group even further, you can use the `use
 
 <CodeDemo title="Custom Implementation" files={radioGroupContent.customImpl} />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -130,7 +130,7 @@ In case you need to customize the radio group even further, you can use the `use
   - **data-disabled**:
     When the radio is disabled. Based on `isDisabled` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -141,7 +141,7 @@ In case you need to customize the radio group even further, you can use the `use
 - Keyboard focus management and cross browser normalization.
 - Group and radio labeling support for assistive technology.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 
@@ -159,7 +159,7 @@ In case you need to customize the radio group even further, you can use the `use
 | defaultValue       | `string[]`                                                                  | The default selected value. (uncontrolled).                                                                                                                                                                             | -          |
 | description        | `ReactNode`                                                                 | Radio group description .                                                                                                                                                                                               | -          |
 | errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                       | Radio group error message.                                                                                                                                                                                              | -          |
-| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`            | Validate input values when committing (e.g. on blur), and return error messages for invalid values.                                                                                                                     | -          |
+| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`            | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -          |
 | validationBehavior | `native` \| `aria`                                                                                                                    | 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.| `aria`     |
 | isDisabled         | `boolean`                                                                   | Whether the radio group is disabled.                                                                                                                                                                                    | `false`    |
 | isRequired         | `boolean`                                                                   | Whether user checkboxes are required on the input before form submission.                                                                                                                                               | `false`    |

apps/docs/content/docs/components/range-calendar.mdx

@@ -226,7 +226,7 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
 | isDateUnavailable         | `(date: DateValue) => boolean`                                                                                                                                                                                                                                                                                                                                                                | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                                                                                  | -                                 |   |
 | createCalendar            | `(calendar: SupportedCalendars) => Calendar \| null`                                                                                                                                                                                                                                                                                                                                          | This function helps to reduce the bundle size by providing a custom calendar system. You can also use the NextUIProvider to provide the createCalendar function to all nested components. | `all<br> calendars`               |   |
 | errorMessage              | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                                                                                                                                                                                                                                                             | An error message for the field.                                                                                                                                                           | -                                 |   |
-| validate                  | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined`                                                                                                                                                                                                                                                                                     | Validate time input values when committing (e.g. on blur), and return error messages for invalid values.                                                                                  | -                                 |   |
+| validate                  | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined`                                                                                                                                                                                                                                                                                     | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -                                 |   |
 | hideDisabledDates         | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to hide the disabled or invalid dates.                                                                                                                                            | `false`                           |   |
 | disableAnimation          | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to disable the animation of the calendar.                                                                                                                                         | `false`                           |   |
 | classNames                | `Record<"base"｜ "prevButton"｜ "nextButton"｜ "headerWrapper" \| "header" \| "title" \| "content" \| "gridWrapper" \| "grid" \| "gridHeader" \| "gridHeaderRow" \| "gridHeaderCell" \| "gridBody" \| "gridBodyRow" \| "cell" \| "cellButton" \| "pickerWrapper" \| "pickerMonthList" \| "pickerYearList" \| "pickerHighlight" \| "pickerItem" \| "helperWrapper" \| "errorMessage", string>` | Allows to set custom class names for the calendar slots.                                                                                                                                  | -                                 |   |

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

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

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

@@ -92,7 +92,7 @@ You can customize the copy and copied icons by using the `copyIcon` and `checkIc
 - **copyIcon**: The copy icon slot.
 - **checkIcon**: The check icon slot.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 

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

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

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

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

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

@@ -265,6 +265,7 @@ You can customize the `Tabs` component by passing custom Tailwind CSS classes to
 | classNames             | `Record<"base"｜ "tabList"｜ "tab"｜ "tabContent"｜ "cursor" ｜ "panel", string>`                      | Allows to set custom class names for the card slots.                                                         | -           |
 | placement            | `top` \| `bottom` \| `start` \| `end`                                                                  | The position of the tabs.                                                                                    | `top`       |
 | isVertical             | `boolean`                                                                                              | Whether the tabs are vertical.                                                                               | `false`     |
+| destroyInactiveTabPanel | `boolean`                     | Whether to destroy inactive tab panel when switching tabs. Inactive tab panels are inert and cannot be interacted with.                                                          | `true`  |
 
 ### Tabs Events
 
@@ -286,7 +287,6 @@ You can customize the `Tabs` component by passing custom Tailwind CSS classes to
 | ping                    | `string`                      | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                   | -       |
 | referrerPolicy          | `HTMLAttributeReferrerPolicy` | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                 | -       |
 | shouldSelectOnPressUp   | `boolean`                     | Whether the tab selection should occur on press up instead of press down.                                                                                                        | -       |
-| destroyInactiveTabPanel | `boolean`                     | Whether to destroy inactive tab panel when switching tabs. Inactive tab panels are inert and cannot be interacted with.                                                          | `true`  |
 
 #### Motion Props
 

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

@@ -13,8 +13,6 @@ Textarea component is a multi-line Input which allows you to write large texts.
 
 ---
 
-
-
 ## Installation
 
 <PackageManagers
@@ -24,11 +22,10 @@ Textarea component is a multi-line Input which allows you to write large texts.
     npm: "npm install @nextui-org/input",
     yarn: "yarn add @nextui-org/input",
     pnpm: "pnpm add @nextui-org/input",
-    bun: "bun add @nextui-org/input"
+    bun: "bun add @nextui-org/input",
   }}
 />
 
-
 ## Import
 
 <ImportTabs
@@ -102,7 +99,7 @@ You can use the `value` and `onValueChange` properties to control the input valu
 - **description**: The description of the textarea.
 - **errorMessage**: The error message of the textarea.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -123,7 +120,7 @@ You can use the `value` and `onValueChange` properties to control the input valu
 - **data-disabled**:
   When the textarea is disabled. Based on `isDisabled` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -133,42 +130,42 @@ You can use the `value` and `onValueChange` properties to control the input valu
 - Required and invalid states exposed to assistive technology via ARIA.
 - Support for description and error message help text linked to the input via ARIA.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 
 ### Textarea Props
 
-| Attribute          | Type                                                                                                               | Description                                                                                                                                                   | Default   |
-| ------------------ | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
-| children           | `ReactNode`                                                                                                        | The content of the textarea.                                                                                                                                  | -         |
-| minRows            | `number`                                                                                                           | The minimum number of rows to display.                                                                                                                        | `3`       |
-| maxRows            | `number`                                                                                                           | Maximum number of rows up to which the textarea can grow.                                                                                                     | `8`       |
-| cacheMeasurements  | `boolean`                                                                                                          | Reuse previously computed measurements when computing height of textarea.                                                                                     | `false`   |
-| variant            | `flat` \| `bordered` \| `faded` \| `underlined`                                                                    | The variant of the textarea.                                                                                                                                  | `flat`    |
-| color              | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                        | The color of the textarea.                                                                                                                                    | `default` |
-| size               | `sm`\|`md`\|`lg`                                                                                                   | The size of the textarea.                                                                                                                                     | `md`      |
-| radius             | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                           | The radius of the textarea.                                                                                                                                   | -         |
-| label              | `ReactNode`                                                                                                        | The content to display as the label.                                                                                                                          | -         |
-| value              | `string`                                                                                                           | The current value of the textarea (controlled).                                                                                                               | -         |
-| defaultValue       | `string`                                                                                                           | The default value of the textarea (uncontrolled).                                                                                                             | -         |
-| placeholder        | `string`                                                                                                           | The placeholder of the textarea.                                                                                                                              | -         |
-| startContent       | `ReactNode`                                                                                                        | Element to be rendered in the left side of the input.                                                                                                         | -         |
-| endContent         | `ReactNode`                                                                                                        | Element to be rendered in the right side of the input.                                                                                                        | -         |
-| description        | `ReactNode`                                                                                                        | A description for the textarea. Provides a hint such as specific requirements for what to choose.                                                             | -         |
-| errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                                                              | An error message for the textarea.                                                                                                                            | -         |
-| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`                                                   | Validate input values when committing (e.g. on blur), and return error messages for invalid values.                                                           | -         |
-| validationBehavior | `native` \| `aria`                                                                                                 | 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.| `aria`    |
-| labelPlacement     | `inside` \| `outside` \| `outside-left`                                                                            | The position of the label.                                                                                                                                    | `inside`  |
-| fullWidth          | `boolean`                                                                                                          | Whether the textarea should take up the width of its parent.                                                                                                  | `true`    |
-| isRequired         | `boolean`                                                                                                          | Whether user input is required on the textarea before form submission.                                                                                        | `false`   |
-| isReadOnly         | `boolean`                                                                                                          | Whether the textarea can be selected but not changed by the user.                                                                                             |           |
-| isDisabled         | `boolean`                                                                                                          | Whether the textarea is disabled.                                                                                                                             | `false`   |
-| isInvalid          | `boolean`                                                                                                          | Whether the textarea is invalid.                                                                                                                              | `false`   |
-| validationState    | `valid` \| `invalid`                                                                                               | Whether the textarea should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead.                                      | -         |
-| disableAutosize    | `boolean`                                                                                                          | Whether the textarea auto vertically resize should be disabled.                                                                                               | `false`   |
-| disableAnimation   | `boolean`                                                                                                          | Whether the textarea should be animated.                                                                                                                      | `false`   |
-| classNames         | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper" ｜ "input" ｜ "description" ｜ "errorMessage", string>`   | Allows to set custom class names for the checkbox slots.                                                                                                      | -         |
+| Attribute          | Type                                                                                                               | Description                                                                                                                                                                                                                                             | Default   |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
+| children           | `ReactNode`                                                                                                        | The content of the textarea.                                                                                                                                                                                                                            | -         |
+| minRows            | `number`                                                                                                           | The minimum number of rows to display.                                                                                                                                                                                                                  | `3`       |
+| maxRows            | `number`                                                                                                           | Maximum number of rows up to which the textarea can grow.                                                                                                                                                                                               | `8`       |
+| cacheMeasurements  | `boolean`                                                                                                          | Reuse previously computed measurements when computing height of textarea.                                                                                                                                                                               | `false`   |
+| variant            | `flat` \| `bordered` \| `faded` \| `underlined`                                                                    | The variant of the textarea.                                                                                                                                                                                                                            | `flat`    |
+| color              | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                        | The color of the textarea.                                                                                                                                                                                                                              | `default` |
+| size               | `sm`\|`md`\|`lg`                                                                                                   | The size of the textarea.                                                                                                                                                                                                                               | `md`      |
+| radius             | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                           | The radius of the textarea.                                                                                                                                                                                                                             | -         |
+| label              | `ReactNode`                                                                                                        | The content to display as the label.                                                                                                                                                                                                                    | -         |
+| value              | `string`                                                                                                           | The current value of the textarea (controlled).                                                                                                                                                                                                         | -         |
+| defaultValue       | `string`                                                                                                           | The default value of the textarea (uncontrolled).                                                                                                                                                                                                       | -         |
+| placeholder        | `string`                                                                                                           | The placeholder of the textarea.                                                                                                                                                                                                                        | -         |
+| startContent       | `ReactNode`                                                                                                        | Element to be rendered in the left side of the input.                                                                                                                                                                                                   | -         |
+| endContent         | `ReactNode`                                                                                                        | Element to be rendered in the right side of the input.                                                                                                                                                                                                  | -         |
+| description        | `ReactNode`                                                                                                        | A description for the textarea. Provides a hint such as specific requirements for what to choose.                                                                                                                                                       | -         |
+| errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                                                              | An error message for the textarea.                                                                                                                                                                                                                      | -         |
+| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`                                                  | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop. | -         |
+| validationBehavior | `native` \| `aria`                                                                                                 | 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.                                                                                          | `aria`    |
+| labelPlacement     | `inside` \| `outside` \| `outside-left`                                                                            | The position of the label.                                                                                                                                                                                                                              | `inside`  |
+| fullWidth          | `boolean`                                                                                                          | Whether the textarea should take up the width of its parent.                                                                                                                                                                                            | `true`    |
+| isRequired         | `boolean`                                                                                                          | Whether user input is required on the textarea before form submission.                                                                                                                                                                                  | `false`   |
+| isReadOnly         | `boolean`                                                                                                          | Whether the textarea can be selected but not changed by the user.                                                                                                                                                                                       |           |
+| isDisabled         | `boolean`                                                                                                          | Whether the textarea is disabled.                                                                                                                                                                                                                       | `false`   |
+| isInvalid          | `boolean`                                                                                                          | Whether the textarea is invalid.                                                                                                                                                                                                                        | `false`   |
+| validationState    | `valid` \| `invalid`                                                                                               | Whether the textarea should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead.                                                                                                                                | -         |
+| disableAutosize    | `boolean`                                                                                                          | Whether the textarea auto vertically resize should be disabled.                                                                                                                                                                                         | `false`   |
+| disableAnimation   | `boolean`                                                                                                          | Whether the textarea should be animated.                                                                                                                                                                                                                | `false`   |
+| classNames         | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper" ｜ "input" ｜ "description" ｜ "errorMessage", string>` | Allows to set custom class names for the checkbox slots.                                                                                                                                                                                                | -         |
 
 ### Input Events
 

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

@@ -78,6 +78,17 @@ A description for the field. Provides a hint such as specific requirements for w
 
 <CodeDemo title="With Description" files={timeInputContent.withDescription} />
 
+### With Error Message
+
+You can combine the `isInvalid` and `errorMessage` properties to show an invalid input.
+
+<CodeDemo title="With Error Message" files={timeInputContent.errorMessage} />
+
+You can also pass an error message as a function. This allows for dynamic error message handling based on the [ValidationResult]((https://github.com/adobe/react-spectrum/blob/1cacbf1d438675feb3859fee54b17e620b458d9c/packages/%40react-types/shared/src/inputs.d.ts#L44-L51)).
+
+<CodeDemo title="With Error Message Function" files={timeInputContent.errorMessageFunction} />
+
+
 ### Label Placement
 
 The label's overall position relative to the element it is labeling.
@@ -223,7 +234,7 @@ By default, `TimeInput` displays times in either 12 or 24 hour hour format depen
 | autoFocus               | `boolean`                                                                                                                                          | Whether the element should receive focus on render.                                                                                                                | -         |
 | description             | `ReactNode`                                                                                                                                        | A description for the field. Provides a hint such as specific requirements for what to choose.                                                                     | -         |
 | errorMessage            | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                  | An error message for the field.                                                                                                                                    | -         |
-| validate                | `(value: MappedTimeValue<TimeValue>) => ValidationError ｜ true ｜ null ｜ undefined`                                                               | Validate time input values when committing (e.g. on blur), and return error messages for invalid values.                                                           | -         |
+| validate                | `(value: MappedTimeValue<TimeValue>) => ValidationError ｜ true ｜ null ｜ undefined`                                                               | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -         |
 | validationBehavior      | `native` \| `aria`                                                                                                                                 | 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.     | `aria`    |
 | disableAnimation        | `boolean`                                                                                                                                          | Whether to disable the animation of the time input.                                                                                                                | -         |
 | classNames              | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper" ｜ "segment" ｜ "helperWrapper" ｜ "input" ｜ "description" ｜ "errorMessage", string>` | Allows to set custom class names for the time input slots.                                                                                                           | -         |

apps/docs/content/docs/components/tooltip.mdx

@@ -28,7 +28,6 @@ Tooltips display a brief, informative message that appears when a user interacts
   }}
 />
 
-
 ## Import
 
 <ImportTabs
@@ -38,6 +37,8 @@ Tooltips display a brief, informative message that appears when a user interacts
   }}
 />
 
+> For individual installation, please note that you should add `./node_modules/@nextui-org/theme/dist/components/popover.js` to your `tailwind.config.js` file instead since tooltip reuses popover styles.
+
 ## Usage
 
 <CodeDemo title="Usage" files={tooltipContent.usage} />

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

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

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

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

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

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

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

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

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

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

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

@@ -178,6 +178,12 @@ Tailwind CSS settings have been updated in: /project-path/tailwind.config.js
 
 ## upgrade
 
+Upgrade all the NextUI components within your project.
+
+```codeBlock bash
+nextui upgrade --all
+```
+
 Upgrade specific NextUI components within your project using the upgrade command to ensure they are up to date.
 
 ```codeBlock bash

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

@@ -9,7 +9,7 @@ Requirements:
 
 - [React 18](https://reactjs.org/) or later
 - [Tailwind CSS 3.4](https://tailwindcss.com/) or later
-- [Framer Motion 4](https://www.framer.com/motion/) or later
+- [Framer Motion 11](https://www.framer.com/motion/) or later
 
 ---
 
@@ -32,11 +32,10 @@ nextui init my-nextui-app
 You will be prompted to configure your project:
 
 ```codeBlock bash
-? Select a template › - Use arrow-keys. Return to submit.
-❯   App
-    A Next.js 13 with app directory template pre-configured with NextUI (v2) and Tailwind CSS.
-    Pages
-    A Next.js 13 with pages directory template pre-configured with NextUI (v2) and Tailwind CSS.
+◇  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.)
 ```
 
 Install the dependencies to start the local server:
@@ -95,11 +94,11 @@ Filtered results for: Enter something to filter
 
 ## Manual Installation
 
-If you prefer not to use the CLI, follow these steps to manually set up NextUI in your project:
+If you prefer not to use the CLI, you may try either global installation or individual installation to set up NextUI in your project:
 
 ### Global Installation
 
-The easiest way to get started with NextUI is to use the global installation. Which means
+The easiest way to get started with NextUI is to use the global installation, which means
 that all the components are imported from a single package.
 
 Follow the steps below to install all NextUI components:
@@ -119,13 +118,31 @@ To install NextUI, run one of the following commands in your terminal:
   }}
 />
 
+#### Hoisted Dependencies Setup
+
+<Blockquote color="primary">
+**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+</Blockquote>
+
+If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
+
+```bash
+public-hoist-pattern[]=*@nextui-org/*
+```
+
+After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
+
 #### Tailwind CSS Setup
 
 NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
 [installation guide](https://tailwindcss.com/docs/installation) to install Tailwind CSS. Then you need to add
 the following code to your `tailwind.config.js` file:
 
-```js {8,13-14}
+<Blockquote color="primary">
+**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules`
+</Blockquote>
+
+```js {9,14-15}
 // tailwind.config.js
 const {nextui} = require("@nextui-org/react");
 
@@ -133,6 +150,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: {
@@ -163,16 +181,6 @@ function App() {
 }
 ```
 
-#### Setup pnpm (optional)
-
-If you are using pnpm, you need to add the following code to your `.npmrc` file:
-
-```bash
-public-hoist-pattern[]=*@nextui-org/*
-```
-
-After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
-
 </Steps>
 
 ### Individual Installation
@@ -181,7 +189,9 @@ NextUI is also available as individual packages. You can install each package se
 is useful if you want to reduce the size of your CSS bundle as it will only include styles for the components
 you're actually using.
 
-> **Note**: JavaScript bundle size will not change due to tree shaking support in NextUI.
+<Blockquote color="primary">
+**Note**: JavaScript bundle size will not change due to tree shaking support in NextUI.
+</Blockquote>
 
 Follow the steps below to install each package separately:
 
@@ -218,6 +228,20 @@ in your terminal:
   }}
 />
 
+#### Hoisted Dependencies Setup
+
+<Blockquote color="primary">
+**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+</Blockquote>
+
+If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
+
+```bash
+public-hoist-pattern[]=*@nextui-org/*
+```
+
+After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
+
 #### Tailwind CSS Setup
 
 TailwindCSS setup changes a bit when you use individual packages. You only need to add the
@@ -279,18 +303,6 @@ function App() {
   );
 }
 ```
-
-
-#### Setup pnpm (optional)
-
-If you are using pnpm, you need to add the following code to your `.npmrc` file:
-
-```bash
-public-hoist-pattern[]=*@nextui-org/*
-```
-
-After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
-
 </Steps>
 
 <Blockquote color="warning">

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

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

apps/docs/package.json

@@ -18,7 +18,7 @@
     "@codesandbox/sandpack-react": "^2.6.4",
     "@iconify/icons-solar": "^1.2.3",
     "@iconify/react": "^4.1.1",
-    "@internationalized/date": "^3.5.2",
+    "@internationalized/date": "^3.5.4",
     "@mapbox/rehype-prism": "^0.6.0",
     "@nextui-org/aria-utils": "workspace:*",
     "@nextui-org/badge": "workspace:*",
@@ -37,17 +37,17 @@
     "@nextui-org/use-infinite-scroll": "workspace:*",
     "@nextui-org/use-is-mobile": "workspace:*",
     "@radix-ui/react-scroll-area": "^1.0.5",
-    "@react-aria/focus": "^3.16.2",
-    "@react-aria/i18n": "^3.10.2",
-    "@react-aria/interactions": "^3.21.1",
-    "@react-aria/selection": "^3.17.5",
-    "@react-aria/ssr": "^3.9.2",
-    "@react-aria/utils": "^3.23.2",
-    "@react-aria/virtualizer": "^3.9.10",
-    "@react-aria/visually-hidden": "^3.8.10",
-    "@react-stately/data": "^3.11.2",
-    "@react-stately/layout": "^3.13.7",
-    "@react-stately/tree": "^3.7.6",
+    "@react-aria/focus": "3.17.1",
+    "@react-aria/i18n": "3.11.1",
+    "@react-aria/interactions": "3.21.3",
+    "@react-aria/selection": "3.18.1",
+    "@react-aria/ssr": "3.9.4",
+    "@react-aria/utils": "3.24.1",
+    "@react-aria/virtualizer": "3.10.1",
+    "@react-aria/visually-hidden": "3.8.12",
+    "@react-stately/data": "3.11.4",
+    "@react-stately/layout": "3.13.9",
+    "@react-stately/tree": "3.8.1",
     "@rehooks/local-storage": "^2.4.5",
     "@vercel/analytics": "^1.2.2",
     "canvas-confetti": "^1.9.2",
@@ -101,7 +101,7 @@
     "@docusaurus/utils": "2.0.0-beta.3",
     "@next/bundle-analyzer": "^13.4.6",
     "@next/env": "^13.4.12",
-    "@react-types/shared": "^3.22.1",
+    "@react-types/shared": "3.23.1",
     "@tailwindcss/typography": "^0.5.9",
     "@types/canvas-confetti": "^1.4.2",
     "@types/lodash": "^4.14.194",

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

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

apps/docs/styles/globals.css

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

apps/docs/styles/sandpack.css

@@ -31,11 +31,6 @@
   max-height: 600px;
 }
 
-.sp-code-viewer.is-expanded .cm-scroller {
-  overflow: auto;
-  padding-bottom: 50px;
-}
-
 .cm-scroller::-webkit-scrollbar {
   width: 0px
 }
@@ -73,4 +68,4 @@
 
 .sp-highlight {
   @apply relative z-10 before:content-[''] before:w-full before:h-full before:absolute before:z-[-1] before:left-0 before:bg-gradient-to-r before:from-white/10 before:to-code-background before:border-l-2 border-l-white/80 dark:before:border-l-white/50;
-}
+}

package.json

@@ -27,9 +27,9 @@
     "test": "jest --verbose --config ./jest.config.js",
     "typecheck": "turbo typecheck",
     "lint": "pnpm lint:pkg && pnpm lint:docs",
-    "lint:pkg": "eslint -c .eslintrc.json ./packages/**/**/*.{ts,tsx}",
+    "lint:pkg": "eslint -c .eslintrc.json ./packages/**/*.{ts,tsx}",
     "lint:docs": "eslint -c .eslintrc.json ./apps/docs/**/*.{ts,tsx}",
-    "lint:fix": "eslint --fix -c .eslintrc.json ./packages/**/**/*.{ts,tsx}",
+    "lint:fix": "eslint --fix -c .eslintrc.json ./packages/**/*.{ts,tsx}",
     "lint:docs-fix": "eslint --fix -c .eslintrc.json ./apps/docs/**/*.{ts,tsx}",
     "check:rap": "tsx scripts/check-rap-updates.ts",
     "fix:rap": "tsx scripts/fix-rap.ts",
@@ -68,7 +68,7 @@
     "@commitlint/config-conventional": "^17.2.0",
     "@react-bootstrap/babel-preset": "^2.1.0",
     "@react-types/link": "^3.4.4",
-    "@react-types/shared": "^3.22.1",
+    "@react-types/shared": "3.23.1",
     "@swc-node/jest": "^1.5.2",
     "@swc/core": "^1.3.35",
     "@swc/jest": "^0.2.24",

packages/components/accordion/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @nextui-org/accordion
 
+## 2.0.36
+
+### Patch Changes
+
+- [#3419](https://github.com/nextui-org/nextui/pull/3419) [`106752aae`](https://github.com/nextui-org/nextui/commit/106752aaefa4ef8bc7b7b1e97a7edcff13722ff6) Thanks [@ryo-manba](https://github.com/ryo-manba)! - Fixed cursor navigation within text (#2152, #3364)
+
+- [#3392](https://github.com/nextui-org/nextui/pull/3392) [`8dce94e5f`](https://github.com/nextui-org/nextui/commit/8dce94e5f03e1ac044bedd05b268b964f37316a7) Thanks [@chirokas](https://github.com/chirokas)! - Pass missing `dividerProps` to Divider (#3390)
+
+- [#3291](https://github.com/nextui-org/nextui/pull/3291) [`e9a6a162e`](https://github.com/nextui-org/nextui/commit/e9a6a162e8a26c6507938191c4e0b5bd94bdbf8d) Thanks [@wingkwong](https://github.com/wingkwong)! - Fixed variants for nested accordions (#3285)
+
+- Updated dependencies [[`60bb09fe6`](https://github.com/nextui-org/nextui/commit/60bb09fe6455475a16225e776348e9acf0537f9b), [`f5d94f96e`](https://github.com/nextui-org/nextui/commit/f5d94f96e4cffed1d4aeef971c89f8d283effd49)]:
+  - @nextui-org/aria-utils@2.0.22
+  - @nextui-org/shared-utils@2.0.6
+  - @nextui-org/divider@2.0.29
+  - @nextui-org/framer-utils@2.0.22
+  - @nextui-org/react-utils@2.0.15
+
+## 2.0.35
+
+### Patch Changes
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/aria-utils@2.0.21
+  - @nextui-org/shared-icons@2.0.8
+  - @nextui-org/use-aria-accordion@2.0.6
+  - @nextui-org/react-utils@2.0.14
+  - @nextui-org/framer-utils@2.0.21
+  - @nextui-org/divider@2.0.28
+
+## 2.0.34
+
+### Patch Changes
+
+- [#3119](https://github.com/nextui-org/nextui/pull/3119) [`685995a12`](https://github.com/nextui-org/nextui/commit/685995a125cc3db26c6adb67ed9f7245b87e792a) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version to `3.24.1` and bump `@react-types/shared` to `3.23.1`
+
+- Updated dependencies [[`685995a12`](https://github.com/nextui-org/nextui/commit/685995a125cc3db26c6adb67ed9f7245b87e792a)]:
+  - @nextui-org/use-aria-accordion@2.0.5
+  - @nextui-org/aria-utils@2.0.20
+  - @nextui-org/framer-utils@2.0.20
+  - @nextui-org/divider@2.0.28
+
 ## 2.0.33
 
 ### Patch Changes

packages/components/accordion/__tests__/accordion.test.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
 import {act, render} from "@testing-library/react";
 import {focus} from "@nextui-org/test-utils";
-import userEvent from "@testing-library/user-event";
+import userEvent, {UserEvent} from "@testing-library/user-event";
+import {Input} from "@nextui-org/input";
 
 import {Accordion, AccordionItem} from "../src";
 
@@ -10,6 +11,12 @@ import {Accordion, AccordionItem} from "../src";
 const spy = jest.spyOn(console, "error").mockImplementation(() => {});
 
 describe("Accordion", () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -115,7 +122,7 @@ describe("Accordion", () => {
     expect(button).toHaveAttribute("aria-expanded", "false");
 
     await act(async () => {
-      await userEvent.click(button);
+      await user.click(button);
     });
 
     expect(button).toHaveAttribute("aria-expanded", "true");
@@ -161,12 +168,12 @@ describe("Accordion", () => {
     });
 
     await act(async () => {
-      await userEvent.keyboard("[ArrowDown]");
+      await user.keyboard("[ArrowDown]");
     });
     expect(secondButton).toHaveFocus();
 
     await act(async () => {
-      await userEvent.keyboard("[ArrowUp]");
+      await user.keyboard("[ArrowUp]");
     });
     expect(firstButton).toHaveFocus();
   });
@@ -194,12 +201,12 @@ describe("Accordion", () => {
     });
 
     await act(async () => {
-      await userEvent.keyboard("[Home]");
+      await user.keyboard("[Home]");
     });
     expect(firstButton).toHaveFocus();
 
     await act(async () => {
-      await userEvent.keyboard("[End]");
+      await user.keyboard("[End]");
     });
     expect(secondButton).toHaveFocus();
   });
@@ -227,7 +234,7 @@ describe("Accordion", () => {
     });
 
     await act(async () => {
-      await userEvent.keyboard("[Tab]");
+      await user.keyboard("[Tab]");
     });
     expect(secondButton).toHaveFocus();
   });
@@ -270,7 +277,7 @@ describe("Accordion", () => {
     expect(button).toHaveAttribute("aria-expanded", "false");
 
     await act(async () => {
-      await userEvent.click(button);
+      await user.click(button);
     });
 
     expect(button).toHaveAttribute("aria-expanded", "true");
@@ -294,17 +301,78 @@ describe("Accordion", () => {
     expect(item1.querySelector("[role='region']")).toBeInTheDocument();
 
     await act(async () => {
-      await userEvent.click(button);
+      await user.click(button);
     });
 
     const item2 = wrapper.getByTestId("item-2");
     const button2 = item2.querySelector("button") as HTMLElement;
 
     await act(async () => {
-      await userEvent.click(button2);
+      await user.click(button2);
     });
 
     expect(item1.querySelector("[role='region']")).toBeInTheDocument();
     expect(item2.querySelector("[role='region']")).toBeInTheDocument();
   });
+
+  it("should handle arrow key navigation within Input inside AccordionItem", async () => {
+    const wrapper = render(
+      <Accordion defaultExpandedKeys={["1"]}>
+        <AccordionItem key="1" title="Accordion Item 1">
+          <Input label="name" type="text" />
+        </AccordionItem>
+        <AccordionItem key="2" title="Accordion Item 2">
+          Accordion Item 2 description
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    const input = wrapper.getByLabelText("name");
+
+    const firstButton = await wrapper.getByRole("button", {name: "Accordion Item 1"});
+
+    await act(() => {
+      focus(firstButton);
+    });
+    await act(async () => {
+      await user.keyboard("[Tab]");
+    });
+    expect(input).toHaveFocus();
+
+    await act(async () => {
+      await user.keyboard("aaa");
+    });
+    expect(input).toHaveValue("aaa");
+
+    await act(async () => {
+      await user.keyboard("[ArrowLeft]");
+      await user.keyboard("b");
+    });
+    expect(input).toHaveValue("aaba");
+
+    await act(async () => {
+      await user.keyboard("[ArrowRight]");
+      await user.keyboard("c");
+    });
+    expect(input).toHaveValue("aabac");
+  });
+
+  it("should pass dividerProps to divider", () => {
+    const {getByRole} = render(
+      <Accordion
+        dividerProps={{
+          className: "bg-rose-500",
+        }}
+      >
+        <AccordionItem key="1" data-testid="item-1" title="Accordion Item 1">
+          Accordion Item 1 description
+        </AccordionItem>
+        <AccordionItem key="2" data-testid="item-2" title="Accordion Item 2">
+          Accordion Item 2 description
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    expect(getByRole("separator")).toHaveClass("bg-rose-500");
+  });
 });

packages/components/accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/accordion",
-  "version": "2.0.33",
+  "version": "2.0.36",
   "description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
   "keywords": [
     "react",
@@ -54,13 +54,13 @@
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/divider": "workspace:*",
     "@nextui-org/use-aria-accordion": "workspace:*",
-    "@react-aria/interactions": "3.21.1",
-    "@react-aria/focus": "3.16.2",
-    "@react-aria/utils": "3.23.2",
-    "@react-stately/tree": "3.7.6",
-    "@react-aria/button": "3.9.3",
-    "@react-types/accordion": "3.0.0-alpha.19",
-    "@react-types/shared": "3.22.1"
+    "@react-aria/interactions": "3.21.3",
+    "@react-aria/focus": "3.17.1",
+    "@react-aria/utils": "3.24.1",
+    "@react-stately/tree": "3.8.1",
+    "@react-aria/button": "3.9.5",
+    "@react-types/accordion": "3.0.0-alpha.21",
+    "@react-types/shared": "3.23.1"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",

packages/components/accordion/src/accordion-item.tsx

@@ -1,3 +1,5 @@
+import type {Variants} from "framer-motion";
+
 import {forwardRef} from "@nextui-org/system";
 import {useMemo, ReactNode} from "react";
 import {ChevronIcon} from "@nextui-org/shared-icons";
@@ -53,6 +55,11 @@ const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
       return <div {...getContentProps()}>{children}</div>;
     }
 
+    const transitionVariants: Variants = {
+      exit: {...TRANSITION_VARIANTS.collapse.exit, overflowY: "hidden"},
+      enter: {...TRANSITION_VARIANTS.collapse.enter, overflowY: "unset"},
+    };
+
     return keepContentMounted ? (
       <LazyMotion features={domAnimation}>
         <m.section
@@ -60,8 +67,11 @@ const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
           animate={isOpen ? "enter" : "exit"}
           exit="exit"
           initial="exit"
-          style={{overflowY: "hidden", willChange}}
-          variants={TRANSITION_VARIANTS.collapse}
+          style={{willChange}}
+          variants={transitionVariants}
+          onKeyDown={(e) => {
+            e.stopPropagation();
+          }}
           {...motionProps}
         >
           <div {...getContentProps()}>{children}</div>
@@ -76,8 +86,11 @@ const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
               animate="enter"
               exit="exit"
               initial="exit"
-              style={{overflowY: "hidden", willChange}}
-              variants={TRANSITION_VARIANTS.collapse}
+              style={{willChange}}
+              variants={transitionVariants}
+              onKeyDown={(e) => {
+                e.stopPropagation();
+              }}
               {...motionProps}
             >
               <div {...getContentProps()}>{children}</div>

packages/components/accordion/src/accordion.tsx

@@ -19,6 +19,7 @@ const AccordionGroup = forwardRef<"div", AccordionProps>((props, ref) => {
     disableAnimation,
     handleFocusChanged: handleFocusChangedProps,
     itemClasses,
+    dividerProps,
   } = useAccordion({
     ...props,
     ref,
@@ -36,6 +37,7 @@ const AccordionGroup = forwardRef<"div", AccordionProps>((props, ref) => {
         <Fragment key={item.key}>
           <AccordionItem
             item={item}
+            variant={props.variant}
             onFocusChange={handleFocusChanged}
             {...values}
             {...item.props}
@@ -44,7 +46,7 @@ const AccordionGroup = forwardRef<"div", AccordionProps>((props, ref) => {
           {!item.props.hidden &&
             !isSplitted &&
             showDivider &&
-            index < state.collection.size - 1 && <Divider />}
+            index < state.collection.size - 1 && <Divider {...dividerProps} />}
         </Fragment>
       );
     });

packages/components/accordion/src/use-accordion-item.ts

@@ -1,3 +1,5 @@
+import type {AccordionItemVariantProps} from "@nextui-org/theme";
+
 import {HTMLNextUIProps, PropGetter, useProviderContext} from "@nextui-org/system";
 import {useFocusRing} from "@react-aria/focus";
 import {accordionItem} from "@nextui-org/theme";
@@ -36,6 +38,7 @@ export interface Props<T extends object> extends HTMLNextUIProps<"div"> {
 }
 
 export type UseAccordionItemProps<T extends object = {}> = Props<T> &
+  AccordionItemVariantProps &
   Omit<AccordionItemBaseProps, "onFocusChange">;
 
 export function useAccordionItem<T extends object = {}>(props: UseAccordionItemProps<T>) {
@@ -53,6 +56,7 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
     startContent,
     motionProps,
     focusedKey,
+    variant,
     isCompact = false,
     classNames: classNamesProp = {},
     isDisabled: isDisabledProp = false,
@@ -125,8 +129,9 @@ export function useAccordionItem<T extends object = {}>(props: UseAccordionItemP
         hideIndicator,
         disableAnimation,
         disableIndicatorAnimation,
+        variant,
       }),
-    [isCompact, isDisabled, hideIndicator, disableAnimation, disableIndicatorAnimation],
+    [isCompact, isDisabled, hideIndicator, disableAnimation, disableIndicatorAnimation, variant],
   );
 
   const baseStyles = clsx(classNames?.base, className);

packages/components/accordion/src/use-accordion.ts

@@ -1,8 +1,9 @@
 import type {SelectionBehavior, MultipleSelection} from "@react-types/shared";
 import type {AriaAccordionProps} from "@react-types/accordion";
 import type {AccordionGroupVariantProps} from "@nextui-org/theme";
+import type {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
 
-import {useProviderContext, type HTMLNextUIProps, type PropGetter} from "@nextui-org/system";
+import {useProviderContext} from "@nextui-org/system";
 import {ReactRef, filterDOMProps} from "@nextui-org/react-utils";
 import React, {Key, useCallback} from "react";
 import {TreeState, useTreeState} from "@react-stately/tree";

packages/components/accordion/stories/accordion.stories.tsx

@@ -13,7 +13,7 @@ import {
   InvalidCardIcon,
 } from "@nextui-org/shared-icons";
 import {Avatar} from "@nextui-org/avatar";
-import {Input} from "@nextui-org/input";
+import {Input, Textarea} from "@nextui-org/input";
 import {Button} from "@nextui-org/button";
 
 import {Accordion, AccordionProps, AccordionItem, AccordionItemProps} from "../src";
@@ -354,7 +354,7 @@ const WithFormTemplate = (args: AccordionProps) => {
         }
       />
       <Input isRequired label="Password" placeholder="Enter your password" type="password" />
-
+      <Textarea label="Message" placeholder="Enter your message" />
       <div className="flex gap-2 justify-end">
         <button className={button({color: "primary"})}>Login</button>
       </div>

packages/components/autocomplete/CHANGELOG.md

@@ -1,5 +1,62 @@
 # @nextui-org/autocomplete
 
+## 2.1.3
+
+### Patch Changes
+
+- [#3311](https://github.com/nextui-org/nextui/pull/3311) [`0462dde0a`](https://github.com/nextui-org/nextui/commit/0462dde0a752e5ee5341c372834be5496296a6cc) Thanks [@wingkwong](https://github.com/wingkwong)! - add `disableDialogFocus` to free-solo-popover (#3225, #3124, #3203)
+
+- Updated dependencies [[`60bb09fe6`](https://github.com/nextui-org/nextui/commit/60bb09fe6455475a16225e776348e9acf0537f9b), [`edd48a09c`](https://github.com/nextui-org/nextui/commit/edd48a09ccab2b0b1c0371d1f3fe23447b07fb54), [`0462dde0a`](https://github.com/nextui-org/nextui/commit/0462dde0a752e5ee5341c372834be5496296a6cc), [`f5d94f96e`](https://github.com/nextui-org/nextui/commit/f5d94f96e4cffed1d4aeef971c89f8d283effd49), [`93f178781`](https://github.com/nextui-org/nextui/commit/93f17878154a6351c38c8ef4806b5fb20e4fa217), [`444d320db`](https://github.com/nextui-org/nextui/commit/444d320dbc146399eb937c219ce983d427675425)]:
+  - @nextui-org/aria-utils@2.0.22
+  - @nextui-org/input@2.2.3
+  - @nextui-org/popover@2.1.25
+  - @nextui-org/shared-utils@2.0.6
+  - @nextui-org/button@2.0.35
+  - @nextui-org/listbox@2.1.23
+  - @nextui-org/scroll-shadow@2.1.18
+  - @nextui-org/spinner@2.0.31
+  - @nextui-org/react-utils@2.0.15
+
+## 2.1.2
+
+### Patch Changes
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - Fix popover focus issue (#3171, #2992)
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- [#2969](https://github.com/nextui-org/nextui/pull/2969) [`255c641f9`](https://github.com/nextui-org/nextui/commit/255c641f96903e0d6d29343774e9e7ae67fcdb34) Thanks [@chirokas](https://github.com/chirokas)! - Fix autocomplete controlled state (#2955)
+
+- [#3175](https://github.com/nextui-org/nextui/pull/3175) [`2069a7a9d`](https://github.com/nextui-org/nextui/commit/2069a7a9d00291266fef763c6817b3bdd3ed4707) Thanks [@wingkwong](https://github.com/wingkwong)! - Fix maximum update depth exceeded on Autocomplete component (#3094)
+
+- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`dbb4b8ee5`](https://github.com/nextui-org/nextui/commit/dbb4b8ee564114bfb0ef93467ed9ef6a3ff7e2e7), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/popover@2.1.24
+  - @nextui-org/aria-utils@2.0.21
+  - @nextui-org/shared-icons@2.0.8
+  - @nextui-org/button@2.0.34
+  - @nextui-org/input@2.2.2
+  - @nextui-org/listbox@2.1.22
+  - @nextui-org/use-aria-button@2.0.9
+  - @nextui-org/react-utils@2.0.14
+  - @nextui-org/scroll-shadow@2.1.17
+  - @nextui-org/spinner@2.0.30
+
+## 2.1.1
+
+### Patch Changes
+
+- [#3119](https://github.com/nextui-org/nextui/pull/3119) [`685995a12`](https://github.com/nextui-org/nextui/commit/685995a125cc3db26c6adb67ed9f7245b87e792a) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version to `3.24.1` and bump `@react-types/shared` to `3.23.1`
+
+- Updated dependencies [[`685995a12`](https://github.com/nextui-org/nextui/commit/685995a125cc3db26c6adb67ed9f7245b87e792a)]:
+  - @nextui-org/button@2.0.33
+  - @nextui-org/input@2.2.1
+  - @nextui-org/listbox@2.1.21
+  - @nextui-org/popover@2.1.23
+  - @nextui-org/use-aria-button@2.0.8
+  - @nextui-org/aria-utils@2.0.20
+  - @nextui-org/scroll-shadow@2.1.16
+  - @nextui-org/spinner@2.0.29
+
 ## 2.1.0
 
 ### Minor Changes