ci(changesets): version packages (#3755)

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

.eslintrc.json

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

.github/ISSUE_TEMPLATE/bug_report.yml

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

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

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

.github/workflows/QA.yaml

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

.github/workflows/release.yaml

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

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

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

.nvmrc

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

.vscode/settings.json

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

CONTRIBUTING.md

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

apps/docs/.sponsorsrc

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

apps/docs/app/blog/layout.tsx

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

apps/docs/app/docs/layout.tsx

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

apps/docs/app/examples/autocomplete/fully-controlled/page.tsx

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

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

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

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

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

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

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

apps/docs/app/figma/page.tsx

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

apps/docs/app/layout.tsx

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

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

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

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

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

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

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

apps/docs/components/footer.tsx

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

apps/docs/components/icons/social.tsx

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

apps/docs/components/index.ts

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

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

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

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

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

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

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

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

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

apps/docs/components/marketing/sponsors.tsx

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

apps/docs/components/navbar.tsx

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

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

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

apps/docs/components/sandpack/sandpack.tsx

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

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

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

apps/docs/components/sonar-pulse.tsx

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

apps/docs/components/vercel-callout.tsx

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

apps/docs/config/routes.json

@@ -132,12 +132,6 @@
       "keywords": "interface elements, interactive components, UI components, widgets",
       "defaultOpen": true,
       "routes": [
-        {
-          "key": "avatar",
-          "title": "Avatar",
-          "keywords": "avatar, profile picture, user representation, identity",
-          "path": "/docs/components/avatar.mdx"
-        },
         {
           "key": "accordion",
           "title": "Accordion",
@@ -150,6 +144,12 @@
           "keywords": "autocomplete, auto suggest, search, typeahead",
           "path": "/docs/components/autocomplete.mdx"
         },
+        {
+          "key": "avatar",
+          "title": "Avatar",
+          "keywords": "avatar, profile picture, user representation, identity",
+          "path": "/docs/components/avatar.mdx"
+        },
         {
           "key": "badge",
           "title": "Badge",
@@ -157,6 +157,12 @@
           "path": "/docs/components/badge.mdx",
           "updated": true
         },
+        {
+          "key": "breadcrumbs",
+          "title": "Breadcrumbs",
+          "keywords": "breadcrumbs, navigation, path, trail, location",
+          "path": "/docs/components/breadcrumbs.mdx"
+        },
         {
           "key": "button",
           "title": "Button",
@@ -164,10 +170,11 @@
           "path": "/docs/components/button.mdx"
         },
         {
-          "key": "breadcrumbs",
-          "title": "Breadcrumbs",
-          "keywords": "breadcrumbs, navigation, path, trail, location",
-          "path": "/docs/components/breadcrumbs.mdx"
+          "key": "calendar",
+          "title": "Calendar",
+          "keywords": "calendar, date picker, month picker, year picker",
+          "path": "/docs/components/calendar.mdx",
+          "newPost": true
         },
         {
           "key": "card",
@@ -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/custom-items.ts

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

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

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

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

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

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

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

apps/docs/content/components/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/dropdown/multiple-selection.ts

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

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

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

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

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

apps/docs/content/components/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/listbox/top-content.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

apps/docs/content/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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -100,7 +100,7 @@ In case you need to customize the radio group even further, you can use the `use
 
 <CodeDemo title="Custom Implementation" files={radioGroupContent.customImpl} />
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Data Attributes
 
@@ -130,7 +130,7 @@ In case you need to customize the radio group even further, you can use the `use
   - **data-disabled**:
     When the radio is disabled. Based on `isDisabled` prop.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## Accessibility
 
@@ -141,7 +141,7 @@ In case you need to customize the radio group even further, you can use the `use
 - Keyboard focus management and cross browser normalization.
 - Group and radio labeling support for assistive technology.
 
-<Spacer y={4} />{" "}
+<Spacer y={4} />
 
 ## API
 
@@ -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
 
@@ -104,7 +104,7 @@ You can customize the copy and copied icons by using the `copyIcon` and `checkIc
 | size             | `sm` \| `md` \| `lg`                                                            | The size of the snippet.                                                                       | `md`    |
 | radius           | `none` \| `sm` \| `md` \| `lg`                                                  | The radius of the snippet.                                                                     | `lg`    |
 | symbol           | `string` \| `ReactNode`                                                         | The symbol to show before the snippet.                                                         | `$`     |
-| timeout          | `number`                                                                        | he time in milliseconds to wait before resetting the clipboard.                                | `2000`  |
+| timeout          | `number`                                                                        | The time in milliseconds to wait before resetting the clipboard.                                | `2000`  |
 | codeString       | `string`                                                                        | The code string to copy. if `codeString` is passed, it will be copied instead of the children. | -       |
 | tooltipProps     | [TooltipProps](/docs/components/tooltip#tooltip-props)                          | The props of the tooltip.                                                                      | -       |
 | copyIcon         | `ReactNode`                                                                     | The copy icon.                                                                                 | -       |

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

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

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

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

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

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

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

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