ci(changesets): version packages (#4440)

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

.github/workflows/release.yaml

@@ -27,9 +27,18 @@ jobs:
         run: pnpm test
 
       - name: Build
-        run: pnpm build
+        id: build
+        continue-on-error: false
+        # Custom turbo build failure information
+        run: |
+          pnpm build || {
+            echo "Turbo build failed with exit code $?"
+            exit 1
+          }
 
       - name: Create Release Pull Request or Publish to NPM
+        # Run only if the build is successful
+        if: steps.build.outcome == 'success'
         id: changesets
         uses: changesets/action@v1
         with:
@@ -43,7 +52,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Create canary release
-        if: steps.changesets.outputs.published != 'true'
+        if: steps.build.outcome == 'success' && steps.changesets.outputs.published != 'true'
         timeout-minutes: 15
         run: |
           git checkout canary

apps/docs/app/blog/layout.tsx

@@ -16,13 +16,21 @@ export default function DocsLayout({children}: DocsLayoutProps) {
         aria-hidden="true"
         className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
       >
-        <Image removeWrapper alt="docs left background" src="/gradients/docs-left.png" />
+        <Image
+          removeWrapper
+          alt="docs left background"
+          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-left.png"
+        />
       </div>
       <div
         aria-hidden="true"
         className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
       >
-        <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
+        <Image
+          removeWrapper
+          alt="docs right background"
+          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-right.png"
+        />
       </div>
 
       <ScriptProviders />

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

@@ -83,6 +83,7 @@ export default async function DocPage({params}: DocPageProps) {
   if (!doc) {
     notFound();
   }
+
   const editUrl = `${GITHUB_URL}/${REPO_NAME}/edit/${TAG}${CONTENT_PATH}${currentRoute?.path}`;
 
   return (

apps/docs/app/docs/layout.tsx

@@ -21,15 +21,23 @@ export default function DocsLayout({children}: DocsLayoutProps) {
       </main>
       <div
         aria-hidden="true"
-        className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
+        className="fixed hidden dark:md:block dark:opacity-100 -bottom-[30%] -left-[30%] z-0"
       >
-        <Image removeWrapper alt="docs left background" src="/gradients/docs-left.png" />
+        <Image
+          removeWrapper
+          alt="docs left background"
+          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-left.png"
+        />
       </div>
       <div
         aria-hidden="true"
-        className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
+        className="fixed hidden dark:md:block dark:opacity-70 -top-[50%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
       >
-        <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
+        <Image
+          removeWrapper
+          alt="docs right background"
+          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-right.png"
+        />
       </div>
 
       <ScriptProviders />

apps/docs/app/examples/modal/placement/page.tsx

@@ -58,7 +58,7 @@ export default function Page() {
                 </p>
               </ModalBody>
               <ModalFooter>
-                <Button color="danger" variant="light" onClick={onClose}>
+                <Button color="danger" variant="light" onPress={onClose}>
                   Close
                 </Button>
                 <Button color="primary" onPress={onClose}>

apps/docs/app/examples/navbar/bordered/page.tsx

@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

apps/docs/app/examples/navbar/controlled-menu/page.tsx

@@ -9,13 +9,10 @@ import {
   NavbarMenuItem,
   NavbarMenuToggle,
   Button,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
 } from "@nextui-org/react";
 import React from "react";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
     <path

apps/docs/app/examples/navbar/custom-active-item/page.tsx

@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

apps/docs/app/examples/navbar/disable-menu-animation/page.tsx

@@ -6,16 +6,13 @@ import {
   NavbarContent,
   NavbarItem,
   Button,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   NavbarMenu,
   NavbarMenuItem,
   NavbarMenuToggle,
 } from "@nextui-org/react";
 import React from "react";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
     <path

apps/docs/app/examples/navbar/disabled-blur/page.tsx

@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

apps/docs/app/examples/navbar/hide-on-scroll/page.tsx

@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

apps/docs/app/examples/navbar/static/page.tsx

@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

apps/docs/app/examples/navbar/usage/page.tsx

@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

apps/docs/app/examples/navbar/with-avatar/page.tsx

@@ -5,8 +5,7 @@ import {
   NavbarBrand,
   NavbarContent,
   NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   DropdownItem,
   DropdownTrigger,
   Dropdown,
@@ -14,8 +13,6 @@ import {
   Avatar,
 } from "@nextui-org/react";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
     <path

apps/docs/app/examples/navbar/with-dropdown-menu/page.tsx

@@ -5,8 +5,7 @@ import {
   NavbarBrand,
   NavbarContent,
   NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   Button,
   DropdownItem,
   DropdownTrigger,
@@ -15,8 +14,6 @@ import {
 } from "@nextui-org/react";
 import {ChevronDown, Lock, Activity, Flash, Server, TagUser, Scale} from "@nextui-org/shared-icons";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
     <path

apps/docs/app/examples/navbar/with-menu/page.tsx

@@ -5,8 +5,7 @@ import {
   NavbarBrand,
   NavbarContent,
   NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   Button,
   NavbarMenuToggle,
   NavbarMenu,
@@ -14,8 +13,6 @@ import {
 } from "@nextui-org/react";
 import React from "react";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
     <path

apps/docs/app/examples/navbar/with-search-input/page.tsx

@@ -5,8 +5,7 @@ import {
   NavbarBrand,
   NavbarContent,
   NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   Input,
   DropdownItem,
   DropdownTrigger,
@@ -15,8 +14,6 @@ import {
   Avatar,
 } from "@nextui-org/react";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 import {SearchLinearIcon} from "@/components/icons";
 
 const AcmeLogo = () => (

apps/docs/app/figma/page.tsx

@@ -36,13 +36,21 @@ export default function FigmaPage() {
         aria-hidden="true"
         className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
       >
-        <Image removeWrapper alt="docs left background" src="/gradients/docs-left.png" />
+        <Image
+          removeWrapper
+          alt="docs left background"
+          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-left.png"
+        />
       </div>
       <div
         aria-hidden="true"
         className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
       >
-        <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
+        <Image
+          removeWrapper
+          alt="docs right background"
+          src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/docs-right.png  "
+        />
       </div>
 
       <ScriptProviders />

apps/docs/app/page.tsx

@@ -13,7 +13,7 @@ import {Community} from "@/components/marketing/community";
 import Support from "@/components/marketing/support";
 import landingContent from "@/content/landing";
 import {Sponsors} from "@/components/marketing/sponsors";
-import {NextUIProSection} from "@/components/marketing/nextui-pro-section";
+import {NextUIProSection} from "@/components/marketing/nextui-pro-section/nextui-pro-section";
 
 export default async function Home() {
   return (

apps/docs/app/providers.tsx

@@ -18,27 +18,28 @@ export interface ProvidersProps {
   themeProps?: ThemeProviderProps;
 }
 
+const ProviderWrapper = ({children}: {children: ReactNode}) => {
+  useEffect(() => {
+    // Initialize PostHog only once when the app starts
+    if (typeof window !== "undefined" && __PROD__ && !posthog.isFeatureEnabled("capture")) {
+      posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
+        api_host: "/ingest",
+        person_profiles: "identified_only",
+        ui_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+      });
+    }
+  }, []);
+
+  if (__PROD__) {
+    return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+  }
+
+  return children;
+};
+
 export function Providers({children, themeProps}: ProvidersProps) {
   const router = useRouter();
 
-  const ProviderWrapper = ({children}: {children: ReactNode}) => {
-    useEffect(() => {
-      if (typeof window !== "undefined" && __PROD__) {
-        posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
-          api_host: "/ingest",
-          person_profiles: "identified_only",
-          ui_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
-        });
-      }
-    }, []);
-
-    if (__PROD__) {
-      return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
-    }
-
-    return children;
-  };
-
   return (
     <ProviderWrapper>
       <NextUIProvider navigate={router.push}>

apps/docs/components/copy-button.tsx

@@ -1,7 +1,8 @@
-import {FC} from "react";
-import {Button, ButtonProps} from "@nextui-org/react";
+import {ButtonProps} from "@nextui-org/react";
 import {useClipboard} from "@nextui-org/use-clipboard";
-import {clsx} from "@nextui-org/shared-utils";
+import {memo} from "react";
+
+import {PreviewButton} from "./preview-button";
 
 import {CheckLinearIcon, CopyLinearIcon} from "@/components/icons";
 
@@ -9,35 +10,28 @@ export interface CopyButtonProps extends ButtonProps {
   value?: string;
 }
 
-export const CopyButton: FC<CopyButtonProps> = ({value, className, ...buttonProps}) => {
+export const CopyButton = memo<CopyButtonProps>(({value, className, ...buttonProps}) => {
   const {copy, copied} = useClipboard();
 
+  const icon = copied ? (
+    <CheckLinearIcon
+      className="opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
+      data-visible={copied}
+      size={16}
+    />
+  ) : (
+    <CopyLinearIcon
+      className="opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
+      data-visible={!copied}
+      size={16}
+    />
+  );
+
   const handleCopy = () => {
     copy(value);
   };
 
-  return (
-    <Button
-      isIconOnly
-      className={clsx(
-        "absolute z-50 right-3 text-zinc-300 top-8 border-1 border-transparent bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100 before:rounded-lg",
-        className,
-      )}
-      size="sm"
-      variant="bordered"
-      onPress={handleCopy}
-      {...buttonProps}
-    >
-      <CheckLinearIcon
-        className="absolute opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
-        data-visible={copied}
-        size={16}
-      />
-      <CopyLinearIcon
-        className="absolute opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
-        data-visible={!copied}
-        size={16}
-      />
-    </Button>
-  );
-};
+  return <PreviewButton className={className} icon={icon} onPress={handleCopy} {...buttonProps} />;
+});
+
+CopyButton.displayName = "CopyButton";

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

@@ -10,6 +10,8 @@ import {SandpackFiles} from "@codesandbox/sandpack-react/types";
 import {BgGridContainer} from "@/components/bg-grid-container";
 import {GradientBox, GradientBoxProps} from "@/components/gradient-box";
 import {CopyButton} from "@/components/copy-button";
+import {StackblitzButton} from "@/components/stackblitz-button";
+import {PreviewButton} from "@/components/preview-button";
 
 export interface ReactLiveDemoProps {
   code: string;
@@ -21,6 +23,7 @@ export interface ReactLiveDemoProps {
   className?: string;
   gradientColor?: GradientBoxProps["color"];
   overflow?: "auto" | "visible" | "hidden";
+  typescriptStrict?: boolean;
 }
 
 // 🚨 Do not pass react-hook-form to scope, it will break the live preview since
@@ -49,11 +52,18 @@ export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
   height,
   className,
   noInline,
+  typescriptStrict = false,
 }) => {
   const content = (
     <>
       {files?.[DEFAULT_FILE] && (
-        <div className="absolute top-[-28px] right-[-8px] z-50">
+        <div className="absolute top-[-26px] right-[3px] z-50 flex items-center">
+          <StackblitzButton
+            button={<PreviewButton icon={undefined} />}
+            className="before:hidden opacity-0 group-hover/code-demo:opacity-100 transition-opacity text-zinc-400"
+            files={files}
+            typescriptStrict={typescriptStrict}
+          />
           <CopyButton
             className="before:hidden opacity-0 group-hover/code-demo:opacity-100 transition-opacity text-zinc-400"
             value={files?.[DEFAULT_FILE] as string}

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

@@ -99,6 +99,10 @@ const CodeBlockHighlight = ({
       ref={intersectionRef}
       style={{
         height: isVisible ? "auto" : `${height}px`,
+        // due to display: contents on the scrollable child element, this div will also scroll
+        // this causes the intersection observer to trigger if scrolled far enough horizontally
+        // set the width to fit-content to prevent this div from going off screen
+        width: "fit-content",
       }}
     >
       {isVisible ? (

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

@@ -99,10 +99,10 @@ export const PackageManagers = ({
         })}
       </Tabs>
       {showGlobalInstallWarning && (
-        <Blockquote className="my-2 text-small" color="warning">
+        <Blockquote className="my-2 text-base md:text-small" color="warning">
           The above command is for individual installation only. You may skip this step if{" "}
-          <Code className="px-1 py-0.5 text-tiny font-mono">@nextui-org/react</Code> is already
-          installed globally.
+          <Code className="px-1 py-0.5 text-small md:text-tiny font-mono">@nextui-org/react</Code>{" "}
+          is already installed globally.
         </Blockquote>
       )}
     </>

apps/docs/components/docs/nextui-pro-callout.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import {usePostHog} from "posthog-js/react";
+import NextLink from "next/link";
+
+export const NextUIProCallout = () => {
+  const posthog = usePostHog();
+
+  const handleClick = () => {
+    posthog.capture("NextUI Pro Banner", {
+      action: "click",
+      category: "nextui-callout",
+    });
+  };
+
+  return (
+    <div className="relative w-full max-w-[12rem] flex flex-col items-center border border-default/60 hover:border-default/90 rounded-xl py-6 px-2 cursor-pointer">
+      <div>
+        <p className="leading-[1.025] tracking-tight text-center text-large font-semibold">
+          Ship&nbsp;
+          <span className="bg-clip-text text-transparent bg-gradient-to-b from-[#5EA2EF] to-[#0072F5]">
+            faster
+          </span>
+          <br />
+          with beautiful
+          <br />
+          components
+        </p>
+        <p className="text-center text-xs mt-2 px-3 font-medium text-default-500 dark:text-default-400 leading-tight">
+          Discover 210+ stunning components by NextUI
+        </p>
+      </div>
+      <div className="mt-3 w-fit flex group items-center text-foreground hover:shadow-sm relative overflow-hidden rounded-full p-[2px]">
+        <span className="absolute inset-[-1000%] bg-[conic-gradient(from_90deg_at_50%_50%,#338EF7_0%,#F54180_50%,#338EF7_100%)]" />
+        <div className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-background transition-background p-2.5 text-xs font-medium hover:font-semibold text-foreground backdrop-blur-3xl">
+          Explore Components
+        </div>
+      </div>
+      <NextLink
+        className="absolute inset-0 z-[1]"
+        href="https://nextui.pro/components?utm_source=nextui.org&utm_medium=callout"
+        onClick={handleClick}
+      />
+    </div>
+  );
+};

apps/docs/components/docs/sidebar.tsx

@@ -1,16 +1,15 @@
 "use client";
 
-import {FC, useEffect, useState} from "react";
+import {FC, useEffect, useState, useRef, useMemo, useLayoutEffect} from "react";
 import {usePostHog} from "posthog-js/react";
 import {ChevronIcon} from "@nextui-org/shared-icons";
 import {CollectionBase, Expandable, MultipleSelection, Node, ItemProps} from "@react-types/shared";
 import {BaseItem} from "@nextui-org/aria-utils";
-import React, {useRef, useMemo} from "react";
 import {useFocusRing} from "@react-aria/focus";
 import {TreeState, useTreeState} from "@react-stately/tree";
 import {useSelectableCollection} from "@react-aria/selection";
 import {usePress} from "@react-aria/interactions";
-import {clsx, dataAttr} from "@nextui-org/shared-utils";
+import {clsx, dataAttr, debounce, isEmpty} from "@nextui-org/shared-utils";
 import {
   SpacerProps,
   Spacer,
@@ -19,7 +18,6 @@ import {
   dataFocusVisibleClasses,
 } from "@nextui-org/react";
 import Link from "next/link";
-import {isEmpty} from "@nextui-org/shared-utils";
 import {usePathname, useRouter} from "next/navigation";
 
 import {ScrollArea} from "../scroll-area";
@@ -243,6 +241,8 @@ function Tree<T extends object>(props: CollectionBase<T> & Expandable & Multiple
 
   let ref = useRef<HTMLDivElement>(null);
 
+  const scrollViewPortRef = useRef<HTMLDivElement>(null);
+
   let keyboardDelegate = useMemo(
     // @ts-expect-error
     () => new TreeKeyboardDelegate(state.collection, state.disabledKeys),
@@ -255,12 +255,36 @@ function Tree<T extends object>(props: CollectionBase<T> & Expandable & Multiple
     keyboardDelegate,
   });
 
+  /*  Handle scroll preservation */
+  useLayoutEffect(() => {
+    if (typeof window !== "undefined") {
+      const savedPosition = sessionStorage.getItem("docsSidebarScrollPosition");
+
+      if (savedPosition && scrollViewPortRef.current) {
+        scrollViewPortRef.current.scrollTop = Number(savedPosition);
+      }
+    }
+  }, []);
+
+  const handleScroll = () => {
+    if (typeof window !== "undefined" && scrollViewPortRef.current) {
+      sessionStorage.setItem(
+        "docsSidebarScrollPosition",
+        scrollViewPortRef.current.scrollTop.toString(),
+      );
+    }
+  };
+
+  const debouncedHandleScroll = debounce(handleScroll, 200);
+
   return (
     <ScrollArea
       ref={ref}
       className="h-full max-w-[90%] lg:max-h-[calc(100vh_-_64px)]"
       role="tree"
       {...collectionProps}
+      scrollViewPortRef={scrollViewPortRef}
+      onScroll={debouncedHandleScroll}
     >
       {[...state.collection].map((item) => {
         if (item.type === "section") {
@@ -317,7 +341,7 @@ export const DocsSidebar: FC<DocsSidebarProps> = ({routes, slug, tag, className}
         )}
       </Tree>
     );
-  }, [routes]);
+  }, [routes, slug, tag]);
 
   return (
     <div

apps/docs/components/docs/toc.tsx

@@ -6,6 +6,8 @@ import {Divider, Spacer} from "@nextui-org/react";
 import {ChevronCircleTopLinearIcon} from "@nextui-org/shared-icons";
 import scrollIntoView from "scroll-into-view-if-needed";
 
+import {NextUIProCallout} from "./nextui-pro-callout";
+
 import {Heading} from "@/libs/docs/utils";
 import {useScrollSpy} from "@/hooks/use-scroll-spy";
 import {useScrollPosition} from "@/hooks/use-scroll-position";
@@ -65,64 +67,64 @@ export const DocsToc: FC<DocsTocProps> = ({headings}) => {
   }, []);
 
   return (
-    <div
-      ref={tocRef}
-      className={clsx(
-        "fixed w-full max-w-[12rem] flex flex-col gap-4 text-left pb-28 h-[calc(100vh-121px)] scrollbar-hide overflow-y-scroll",
-        isProBannerVisible ? "top-32" : "top-20",
-      )}
-      style={{
-        WebkitMaskImage: `linear-gradient(to top, transparent 0%, #000 100px, #000 ${
-          scrollPosition > 30 ? "90%" : "100%"
-        }, transparent 100%)`,
-      }}
-    >
-      <p className="text-sm font-medium">On this page</p>
-      <ul className="scrollbar-hide flex flex-col gap-2">
-        {headings.map(
-          (heading, i) =>
-            heading.level > 1 && (
-              <li
-                key={i}
-                className={clsx(
-                  "transition-colors",
-                  "font-normal",
-                  "flex items-center text-tiny font-normal text-default-500 dark:text-default-300",
-                  "data-[active=true]:text-foreground",
-                  "dark:data-[active=true]:text-foreground",
-                  "before:content-['']",
-                  "before:opacity-0",
-                  "data-[active=true]:before:opacity-100",
-                  "before:transition-opacity",
-                  "before:-ml-3",
-                  "before:absolute",
-                  "before:bg-default-400",
-                  "before:w-1",
-                  "before:h-1",
-                  "before:rounded-full",
-                  paddingLeftByLevel[heading.level],
-                )}
-                data-active={activeId == heading.id}
-              >
-                <a href={`#${heading.id}`}>{heading.text}</a>
-              </li>
-            ),
-        )}
-        <li
-          className="mt-2 opacity-0 data-[visible=true]:opacity-100 transition-opacity"
-          data-visible={activeIndex >= 2}
-        >
-          <Divider />
-          <Spacer y={2} />
-          <a
-            className="flex gap-2 items-center text-tiny text-default-500 dark:text-foreground/30 hover:text-foreground/80 pl-4 transition-opacity"
-            href={`#${firstId}`}
+    <div className={clsx("fixed", isProBannerVisible ? "top-32" : "top-20")}>
+      <div
+        ref={tocRef}
+        className="w-full max-w-[12rem] max-h-[calc(100vh-500px)] flex flex-col gap-4 text-left pb-16 scrollbar-hide overflow-y-scroll"
+        style={{
+          WebkitMaskImage: `linear-gradient(to top, transparent 0%, #000 100px, #000 ${
+            scrollPosition > 30 ? "90%" : "100%"
+          }, transparent 100%)`,
+        }}
+      >
+        <p className="text-sm font-medium">On this page</p>
+        <ul className="scrollbar-hide flex flex-col gap-2">
+          {headings.map(
+            (heading, i) =>
+              heading.level > 1 && (
+                <li
+                  key={i}
+                  className={clsx(
+                    "transition-colors",
+                    "font-normal",
+                    "flex items-center text-tiny font-normal text-default-500 dark:text-default-300",
+                    "data-[active=true]:text-foreground",
+                    "dark:data-[active=true]:text-foreground",
+                    "before:content-['']",
+                    "before:opacity-0",
+                    "data-[active=true]:before:opacity-100",
+                    "before:transition-opacity",
+                    "before:-ml-3",
+                    "before:absolute",
+                    "before:bg-default-400",
+                    "before:w-1",
+                    "before:h-1",
+                    "before:rounded-full",
+                    paddingLeftByLevel[heading.level],
+                  )}
+                  data-active={activeId == heading.id}
+                >
+                  <a href={`#${heading.id}`}>{heading.text}</a>
+                </li>
+              ),
+          )}
+          <li
+            className="mt-2 opacity-0 data-[visible=true]:opacity-100 transition-opacity"
+            data-visible={activeIndex >= 2}
           >
-            Back to top
-            <ChevronCircleTopLinearIcon />
-          </a>
-        </li>
-      </ul>
+            <Divider />
+            <Spacer y={2} />
+            <a
+              className="flex gap-2 items-center text-tiny text-default-500 dark:text-foreground/30 hover:text-foreground/80 pl-4 transition-opacity"
+              href={`#${firstId}`}
+            >
+              Back to top
+              <ChevronCircleTopLinearIcon />
+            </a>
+          </li>
+        </ul>
+      </div>
+      <NextUIProCallout />
     </div>
   );
 };

apps/docs/components/icons/social.tsx

@@ -423,6 +423,23 @@ const CodeSandboxIcon: React.FC<IconSvgProps> = ({width = "1em", height = "1em",
   );
 };
 
+const StackblitzIcon: React.FC<IconSvgProps> = ({...props}) => {
+  return (
+    <svg
+      height={16}
+      viewBox="0 0 1024 1024"
+      width={16}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M848 359.3H627.7L825.8 109c4.1-5.3.4-13-6.3-13H436c-2.8 0-5.5 1.5-6.9 4L170 547.5c-3.1 5.3.7 12 6.9 12h174.4l-89.4 357.6c-1.9 7.8 7.5 13.3 13.3 7.7L853.5 373c5.2-4.9 1.7-13.7-5.5-13.7M378.2 732.5l60.3-241H281.1l189.6-327.4h224.6L487 427.4h211z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
 const JavascriptIcon: React.FC<IconSvgProps> = ({width = "1em", height = "1em", ...props}) => {
   return (
     <svg
@@ -470,6 +487,7 @@ export {
   NewNextJSIcon,
   StorybookIcon,
   CodeSandboxIcon,
+  StackblitzIcon,
   JavascriptIcon,
   TypescriptIcon,
   BunIcon,

apps/docs/components/marketing/install-banner.tsx

@@ -72,7 +72,7 @@ export const InstallBanner = () => {
               href="/docs/guide/installation"
               radius="full"
               size="md"
-              onClick={() => {
+              onPress={() => {
                 posthog.capture("InstallBanner - Get Started", {
                   action: "press",
                   category: "landing-page",
@@ -91,7 +91,7 @@ export const InstallBanner = () => {
               size="md"
               startContent={<GithubIcon />}
               variant="bordered"
-              onClick={() => {
+              onPress={() => {
                 posthog.capture("InstallBanner - Github", {
                   action: "press",
                   category: "landing-page",

apps/docs/components/marketing/marquee.tsx

@@ -9,6 +9,7 @@ import {cn} from "@nextui-org/react";
 
 interface MarqueeProps {
   className?: string;
+  wrapperClassName?: string;
   reverse?: boolean;
   shadow?: boolean;
   duration?: number;
@@ -20,6 +21,7 @@ interface MarqueeProps {
 
 export const Marquee = ({
   className,
+  wrapperClassName,
   reverse,
   duration = 40,
   shadow = false,
@@ -59,14 +61,18 @@ export const Marquee = ({
       }}
     >
       <div
-        className={cn("flex w-max items-stretch gap-[--gap]", {
-          "flex-col": vertical,
-          "h-full": vertical,
-          "animate-scrolling-banner": !vertical,
-          "animate-scrolling-banner-vertical": vertical,
-          "[animation-direction:reverse]": reverse,
-          "hover:[animation-play-state:paused]": pauseOnHover,
-        })}
+        className={cn(
+          "flex w-max items-stretch gap-[--gap]",
+          {
+            "flex-col": vertical,
+            "h-full": vertical,
+            "animate-scrolling-banner": !vertical,
+            "animate-scrolling-banner-vertical": vertical,
+            "[animation-direction:reverse]": reverse,
+            "hover:[animation-play-state:paused]": pauseOnHover,
+          },
+          wrapperClassName,
+        )}
       >
         {Children.map(children, (child) =>
           child && typeof child === "object" && "type" in child ? cloneElement(child) : child,

apps/docs/components/marketing/nextui-pro-section.tsx

@@ -1,182 +0,0 @@
-"use client";
-
-import {Button, Chip} from "@nextui-org/react";
-import {useEffect, useState} from "react";
-import {useTheme} from "next-themes";
-
-import {sectionWrapper, title, titleWrapper, subtitle} from "../primitives";
-
-import Marquee from "./marquee";
-
-import {useIsMobile} from "@/hooks/use-media-query";
-
-export const NextUIProSection = () => {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  const isMobile = useIsMobile();
-  const {theme} = useTheme();
-  const isDarkMode = theme === "dark";
-
-  let imgSrc: string;
-
-  if (isDarkMode) {
-    imgSrc = isMobile
-      ? "/images/nextuipro-section-background@mobile.webp"
-      : "/images/nextuipro-section-background.webp";
-  } else {
-    imgSrc = isMobile
-      ? "/images/nextuipro-section-background-light@mobile.webp"
-      : "/images/nextuipro-section-background-light.webp";
-  }
-
-  const mobileClassName: string = isDarkMode
-    ? "h-full w-full bg-[radial-gradient(at_40%_80%,_rgba(255,255,255,_0)_5%,_rgba(0,0,0,_0.8)_50%,_rgba(0,0,0,1)_100%)]"
-    : "h-full w-full bg-[radial-gradient(at_40%_80%,_rgba(0,0,0,_0)_5%,_rgba(255,255,255,_0.8)_50%,_rgba(255,255,255,1)_100%)]";
-
-  const webClassName: string = isDarkMode
-    ? "h-full w-full bg-[radial-gradient(at_80%_50%,_rgba(255,255,255,_0)_20%,_rgba(0,0,0,_0.8)_40%,_rgba(0,0,0,1)_100%)]"
-    : "h-full w-full bg-[radial-gradient(at_80%_50%,_rgba(0,0,0,_0)_20%,_rgba(255,255,255,_0.9)_40%,_rgba(255,255,255,1)_100%)]";
-
-  if (!mounted) return null;
-
-  const CheckmarkIcon = () => (
-    <svg fill="none" height="11" viewBox="0 0 13 11" width="13" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M1 6.4L4.14286 10L12 1"
-        stroke="#006FEE"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-      />
-    </svg>
-  );
-
-  return (
-    <section className={sectionWrapper({class: "mt-16 lg:mt-44 overflow-hidden"})}>
-      <div className="flex flex-col gap-8 min-h-[480px]">
-        <div className="z-30 flex w-screen h-full flex-col items-start justify-center leading-8 pt-4">
-          <Chip
-            classNames={{
-              base: "ml-0.5 transition-colors bg-gradient-to-br from-cyan-600 to-blue-600",
-              content: "text-tiny font-semibold",
-            }}
-            color="primary"
-            size="sm"
-          >
-            PRO
-          </Chip>
-          <div className={titleWrapper({class: "mt-2 inline md:block"})}>
-            <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
-              Ship&nbsp;
-            </h1>
-            <h1
-              className={title({
-                size: "lg",
-                color: "blue",
-                class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]",
-              })}
-            >
-              faster&nbsp;
-            </h1>
-            <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
-              with&nbsp;
-            </h1>
-            <div className="flex flex-col sm:flex-row">
-              <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
-                beautiful&nbsp;
-              </h1>
-              <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
-                components
-              </h1>
-            </div>
-          </div>
-          <p className={subtitle({class: "pr-12 text-foreground-500"})}>
-            Premade templates of over 210+ beautiful and responsive components, professionally
-            created by the team behind NextUI.
-          </p>
-          <div className="mt-4 text-foreground-600 font-medium">
-            <div className="flex gap-x-4 items-center">
-              <CheckmarkIcon />
-              210+ Components
-            </div>
-            <div className="flex gap-x-4 items-center">
-              <CheckmarkIcon />
-              Lifetime Access
-            </div>
-            <div className="flex gap-x-4 items-center">
-              <CheckmarkIcon />
-              Free Updates
-            </div>
-            <div className="flex gap-x-4 items-center">
-              <CheckmarkIcon />
-              Figma Files Included
-            </div>
-          </div>
-          <div className="mt-4">
-            <Button
-              as={"a"}
-              className="px-6 flex items-center"
-              color="primary"
-              href="https://nextui.pro?utm_source=nextui.org&utm_medium=nextui-homepage-section"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              Explore NextUI Pro
-              <svg
-                fill="none"
-                height="21"
-                viewBox="0 0 20 21"
-                width="20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M12.0254 5.44189L17.0837 10.5002L12.0254 15.5586"
-                  stroke="white"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeMiterlimit="10"
-                  strokeWidth="1.5"
-                />
-                <path
-                  d="M2.91602 10.5H16.941"
-                  stroke="white"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeMiterlimit="10"
-                  strokeWidth="1.5"
-                />
-              </svg>
-            </Button>
-          </div>
-        </div>
-        <div className="overflow-hidden">
-          <Marquee
-            vertical
-            className="h-78 hidden md:flex w-screen mt-4 md:absolute md:top-0 md:inset-0 isolate md:max-h-dvh"
-            duration={isMobile ? 240 : 60}
-          >
-            <img
-              alt="Hero Background"
-              className="w-full"
-              height={3255}
-              loading="lazy"
-              src={imgSrc}
-              width={1920}
-            />
-          </Marquee>
-          <div className="absolute md:hidden inset-0 pointer-events-none top-0 z-20">
-            <div className={mobileClassName} />
-          </div>
-
-          <div className="absolute hidden md:block md:inset-0 md:pointer-events-none md:top-0 md:z-20">
-            <div className={webClassName} />
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};

apps/docs/components/marketing/nextui-pro-section/index.ts

@@ -0,0 +1 @@
+export {NextUIProSection} from "./nextui-pro-section";

apps/docs/components/marketing/nextui-pro-section/nextui-pro-button.tsx

@@ -0,0 +1,32 @@
+import {Button} from "@nextui-org/react";
+
+export const NextUIProButton = () => (
+  <Button
+    as={"a"}
+    className="px-6 flex items-center"
+    color="primary"
+    href="https://nextui.pro?utm_source=nextui.org&utm_medium=nextui-homepage-section"
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    Explore NextUI Pro
+    <svg fill="none" height="21" viewBox="0 0 20 21" width="20" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12.0254 5.44189L17.0837 10.5002L12.0254 15.5586"
+        stroke="white"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M2.91602 10.5H16.941"
+        stroke="white"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        strokeWidth="1.5"
+      />
+    </svg>
+  </Button>
+);

apps/docs/components/marketing/nextui-pro-section/nextui-pro-chip.tsx

@@ -0,0 +1,14 @@
+import {Chip} from "@nextui-org/react";
+
+export const NextUIProChip = () => (
+  <Chip
+    classNames={{
+      base: "ml-0.5 transition-colors bg-gradient-to-br from-cyan-600 to-blue-600",
+      content: "text-tiny font-semibold",
+    }}
+    color="primary"
+    size="sm"
+  >
+    PRO
+  </Chip>
+);

apps/docs/components/marketing/nextui-pro-section/nextui-pro-image.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import {useTheme} from "next-themes";
+import NextImage from "next/image";
+import {useEffect, useState} from "react";
+
+export const NextUIProImage = () => {
+  const [mounted, setMounted] = useState(false);
+  const {theme} = useTheme();
+  const isDarkMode = theme === "dark";
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  let imgSrc = isDarkMode
+    ? "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/nextuipro-section-background.webp"
+    : "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/nextuipro-section-background-light.webp";
+
+  if (!mounted) return null;
+
+  return (
+    <NextImage
+      alt="Hero Background"
+      className="opacity-0 animate-fadeIn"
+      height={3255}
+      quality={100}
+      src={imgSrc}
+      width={1920}
+    />
+  );
+};

apps/docs/components/marketing/nextui-pro-section/nextui-pro-section.tsx

@@ -0,0 +1,105 @@
+import {memo} from "react";
+import clsx from "clsx";
+
+import {sectionWrapper, title, titleWrapper, subtitle} from "../../primitives";
+import Marquee from "../marquee";
+
+import {NextUIProButton} from "./nextui-pro-button";
+import {NextUIProChip} from "./nextui-pro-chip";
+import {NextUIProImage} from "./nextui-pro-image";
+
+const CheckmarkIcon = memo(() => (
+  <svg fill="none" height="11" viewBox="0 0 13 11" width="13" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M1 6.4L4.14286 10L12 1"
+      stroke="#006FEE"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    />
+  </svg>
+));
+
+CheckmarkIcon.displayName = "CheckmarkIcon";
+
+export const NextUIProSection = () => {
+  return (
+    <section
+      className={sectionWrapper({
+        class: "flex-row items-end relative mt-16 lg:mt-44 overflow-hidden",
+      })}
+    >
+      <div className="flex min-h-[480px]">
+        <div className="w-full w-full relative z-30 flex h-full flex-col items-start justify-center leading-8 pt-4">
+          <NextUIProChip />
+          <div className={titleWrapper({class: "mt-2 inline md:block"})}>
+            <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
+              Ship&nbsp;
+            </h1>
+            <h1
+              className={title({
+                size: "lg",
+                color: "blue",
+                class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]",
+              })}
+            >
+              faster&nbsp;
+            </h1>
+            <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
+              with&nbsp;
+            </h1>
+            <div className="flex flex-col sm:flex-row">
+              <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
+                beautiful&nbsp;
+              </h1>
+              <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
+                components
+              </h1>
+            </div>
+          </div>
+          <p className={subtitle({class: "pr-12 text-foreground-500"})}>
+            Premade templates of over 210+ beautiful and responsive components, professionally
+            created by the team behind NextUI.
+          </p>
+          <ul className="mt-4 text-foreground-600 font-medium">
+            <li className="flex gap-x-4 items-center">
+              <CheckmarkIcon />
+              210+ Components
+            </li>
+            <li className="flex gap-x-4 items-center">
+              <CheckmarkIcon />
+              Lifetime Access
+            </li>
+            <li className="flex gap-x-4 items-center">
+              <CheckmarkIcon />
+              Free Updates
+            </li>
+            <li className="flex gap-x-4 items-center">
+              <CheckmarkIcon />
+              Figma Files Included
+            </li>
+          </ul>
+          <div className="mt-4">
+            <NextUIProButton />
+          </div>
+        </div>
+      </div>
+      <div className="hidden md:block w-screen">
+        <Marquee
+          vertical
+          className="hidden md:block relative flex overflow-visible items-center min-h-[480px]"
+          duration={90}
+          wrapperClassName="absolute md:top-24 -left-[47%] w-[1000px]"
+        >
+          <NextUIProImage />
+        </Marquee>
+        <div
+          className={clsx(
+            "absolute inset-0 pointer-events-none z-20 bg-white dark:bg-black",
+            "[-webkit-mask-image:radial-gradient(at_70%_50%,_rgba(255,255,255,0)_20%,_rgba(255,255,255,0.8)_40%,_rgba(0,0,0,1)_60%)]",
+          )}
+        />
+      </div>
+    </section>
+  );
+};

apps/docs/components/marketing/sponsor-item.tsx

@@ -17,7 +17,7 @@ export const SponsorItem = ({name, href, logo}: Sponsor) => {
       isExternal
       className="flex flex-col items-center justify-center"
       href={href}
-      onClick={() => {
+      onPress={() => {
         posthog.capture("Hero - Sponsors", {
           name,
           action: "click",

apps/docs/components/mdx-components.tsx

@@ -198,16 +198,27 @@ const Link = ({href, children}: {href?: string; children?: React.ReactNode}) =>
       disableAnimation={true}
       href={href}
       {...externalProps}
-      onClick={handleClick}
+      onPress={handleClick}
     >
       {children}
     </Components.Link>
   );
 };
 
-const InlineCodeChip = ({children}: {children?: React.ReactNode}) => {
+const InlineCodeChip = ({
+  children,
+  className,
+}: {
+  children?: React.ReactNode;
+  className?: string;
+}) => {
   return (
-    <InlineCode className="before:hidden after:hidden text-tiny rounded-md text-default-600 bg-default-100 dark:bg-default-100/80 px-1.5 py-0.5">
+    <InlineCode
+      className={clsx(
+        "before:hidden after:hidden text-tiny rounded-md text-default-600 bg-default-100 dark:bg-default-100/80 px-1.5 py-0.5",
+        className,
+      )}
+    >
       {children}
     </InlineCode>
   );
@@ -218,6 +229,7 @@ interface APITableProps {
     attribute: string;
     type: string;
     description: string;
+    deprecated?: boolean;
     default?: string;
   }[];
 }
@@ -237,7 +249,9 @@ export const APITable: React.FC<APITableProps> = ({data}) => {
           {data.map((item, index) => (
             <TableRow key={index} className="[&>td]:px-2 [&>td]:py-1.5 [&>td]:first:pt-4">
               <TableCell className="flex items-center gap-1 font-mono text-small whitespace-nowrap">
-                <InlineCodeChip>{item.attribute}</InlineCodeChip>
+                <InlineCodeChip className={item.deprecated ? "line-through" : ""}>
+                  {item.attribute}
+                </InlineCodeChip>
                 {item.description && (
                   <>
                     {/* Desktop tooltip */}

apps/docs/components/navbar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import {useRef, useState, FC, ReactNode, Key} from "react";
+import {useRef, useState, FC, ReactNode, Key, useMemo, useCallback} from "react";
 import {
   link,
   Navbar as NextUINavbar,
@@ -94,6 +94,31 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
     "/docs/guide/upgrade-to-v2",
   ];
 
+  const navLinkClasses = clsx(
+    link({color: "foreground"}),
+    "data-[active=true]:text-primary data-[active=true]:font-semibold",
+  );
+
+  const handleVersionChange = useCallback((key: Key) => {
+    if (key === "v1") {
+      const newWindow = window.open("https://v1.nextui.org", "_blank", "noopener,noreferrer");
+
+      if (newWindow) newWindow.opener = null;
+    }
+  }, []);
+
+  const handlePressNavbarItem = useCallback(
+    (name: string, url: string) => {
+      posthog.capture("NavbarItem", {
+        name,
+        action: "press",
+        category: "navbar",
+        data: url,
+      });
+    },
+    [posthog],
+  );
+
   const searchButton = (
     <Button
       aria-label="Quick search"
@@ -120,32 +145,47 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
     </Button>
   );
 
+  const versionDropdown = useMemo(() => {
+    return ref.current ? (
+      <Dropdown placement="bottom-start" portalContainer={ref.current}>
+        <AnimatePresence>
+          {isMounted && (
+            <motion.div animate={{opacity: 1}} exit={{opacity: 0}} initial={{opacity: 0}}>
+              <DropdownTrigger>
+                <Button
+                  className="min-w-[74px] max-w-[74px] hidden font-medium text-default-500 text-xs h-6 w-[74px] py-1 min-w-fit sm:flex gap-0.5 bg-default-400/20 dark:bg-default-500/20"
+                  endContent={<ChevronDownIcon className="text-tiny" />}
+                  radius="full"
+                  size="sm"
+                  variant="flat"
+                >
+                  v{currentVersion}
+                </Button>
+              </DropdownTrigger>
+            </motion.div>
+          )}
+        </AnimatePresence>
+        <DropdownMenu
+          aria-label="NextUI versions"
+          defaultSelectedKeys={["v2"]}
+          selectionMode="single"
+          onAction={handleVersionChange}
+        >
+          <DropdownItem key="v2">v{currentVersion}</DropdownItem>
+          <DropdownItem key="v1" endContent={<LinkIcon />}>
+            v1.0.0
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    ) : (
+      <div className="w-[74px]" />
+    );
+  }, [ref.current, isMounted]);
+
   if (pathname.includes("/examples")) {
     return null;
   }
 
-  const navLinkClasses = clsx(
-    link({color: "foreground"}),
-    "data-[active=true]:text-primary data-[active=true]:font-semibold",
-  );
-
-  const handleVersionChange = (key: Key) => {
-    if (key === "v1") {
-      const newWindow = window.open("https://v1.nextui.org", "_blank", "noopener,noreferrer");
-
-      if (newWindow) newWindow.opener = null;
-    }
-  };
-
-  const handlePressNavbarItem = (name: string, url: string) => {
-    posthog.capture("NavbarItem", {
-      name,
-      action: "press",
-      category: "navbar",
-      data: url,
-    });
-  };
-
   return (
     <NextUINavbar
       ref={ref}
@@ -172,40 +212,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
             <SmallLogo className="w-6 h-6 md:hidden" />
             <LargeLogo className="h-5 md:h-6" />
           </NextLink>
-          {ref.current ? (
-            <Dropdown placement="bottom-start" portalContainer={ref.current}>
-              <AnimatePresence>
-                {isMounted && (
-                  <motion.div animate={{opacity: 1}} exit={{opacity: 0}} initial={{opacity: 0}}>
-                    <DropdownTrigger>
-                      <Button
-                        className="min-w-[74px] max-w-[74px] hidden font-medium text-default-500 text-xs h-6 w-[74px] py-1 min-w-fit sm:flex gap-0.5 bg-default-400/20 dark:bg-default-500/20"
-                        endContent={<ChevronDownIcon className="text-tiny" />}
-                        radius="full"
-                        size="sm"
-                        variant="flat"
-                      >
-                        v{currentVersion}
-                      </Button>
-                    </DropdownTrigger>
-                  </motion.div>
-                )}
-              </AnimatePresence>
-              <DropdownMenu
-                aria-label="NextUI versions"
-                defaultSelectedKeys={["v2"]}
-                selectionMode="single"
-                onAction={handleVersionChange}
-              >
-                <DropdownItem key="v2">v{currentVersion}</DropdownItem>
-                <DropdownItem key="v1" endContent={<LinkIcon />}>
-                  v1.0.0
-                </DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
-          ) : (
-            <div className="w-[74px]" />
-          )}
+          {versionDropdown}
           <Chip
             as={NextLink}
             className="hidden sm:flex bg-primary-100/50 border-1 hover:bg-primary-100/80 border-primary-200/50 cursor-pointer"

apps/docs/components/preview-button.tsx

@@ -0,0 +1,31 @@
+import {forwardRef} from "react";
+import {Button, ButtonProps} from "@nextui-org/react";
+import {clsx} from "@nextui-org/shared-utils";
+
+export interface PreviewButtonProps extends ButtonProps {
+  icon: React.ReactNode;
+}
+
+export const PreviewButton = forwardRef<HTMLButtonElement | null, PreviewButtonProps>(
+  (props, ref) => {
+    const {icon, className, ...buttonProps} = props;
+
+    return (
+      <Button
+        ref={ref}
+        isIconOnly
+        className={clsx(
+          "relative z-50 text-zinc-300 top-8 border-1 border-transparent bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100 before:rounded-lg",
+          className,
+        )}
+        size="sm"
+        variant="light"
+        {...buttonProps}
+      >
+        {icon}
+      </Button>
+    );
+  },
+);
+
+PreviewButton.displayName = "PreviewButton";

apps/docs/components/sandpack/copy-button.tsx

@@ -23,7 +23,7 @@ export const CopyButton = ({code: codeProp}: {code?: string}) => {
       content={copied ? "Copied!" : "Copy"}
       radius="md"
     >
-      <Button isIconOnly size="sm" title="Copy Code" variant="light" onClick={copyHandler}>
+      <Button isIconOnly size="sm" title="Copy Code" variant="light" onPress={copyHandler}>
         <CopyLinearIcon className="text-white dark:text-zinc-500" height={16} width={16} />
       </Button>
     </Tooltip>

apps/docs/components/sandpack/sandpack.tsx

@@ -3,6 +3,8 @@
 import {FC, useRef} from "react";
 import {SandpackProvider, SandpackLayout, SandpackPreview} from "@codesandbox/sandpack-react";
 
+import {StackblitzButton} from "../stackblitz-button";
+
 import {SandpackCodeViewer} from "./code-viewer";
 import {nextuiTheme} from "./theme";
 import {UseSandpackProps, useSandpack} from "./use-sandpack";
@@ -72,6 +74,18 @@ export const Sandpack: FC<SandpackProps> = ({
               {showReportBug && <BugReportButton />}
               {showCopyCode && <CopyButton />}
               {!showPreview && showOpenInCodeSandbox && <CodeSandboxButton />}
+              {!showPreview && showOpenInCodeSandbox && (
+                <StackblitzButton
+                  isIconOnly
+                  as="span"
+                  className="dark:text-zinc-500 text-white"
+                  files={files}
+                  size="sm"
+                  title="Open in Stackblitz"
+                  typescriptStrict={typescriptStrict}
+                  variant="light"
+                />
+              )}
             </div>
             {hasTypescript && sandpackTemplate && (
               <LanguageSelector template={sandpackTemplate} onChange={setCurrentTemplate} />

apps/docs/components/scroll-area.tsx

@@ -6,15 +6,23 @@ import {cn} from "@nextui-org/react";
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
+    scrollViewPortRef?: React.RefObject<HTMLDivElement>;
+  }
 >(({className, children, ...props}, ref) => {
+  const {onScroll, scrollViewPortRef, ...restProps} = props;
+
   return (
     <ScrollAreaPrimitive.Root
       ref={ref}
       className={cn("relative overflow-hidden", className)}
-      {...props}
+      {...restProps}
     >
-      <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit] pb-28">
+      <ScrollAreaPrimitive.Viewport
+        ref={scrollViewPortRef}
+        className="h-full w-full rounded-[inherit] pb-28"
+        onScroll={onScroll}
+      >
         {children}
       </ScrollAreaPrimitive.Viewport>
       <ScrollBar />

apps/docs/components/stackblitz-button.tsx

@@ -0,0 +1,58 @@
+import React, {forwardRef} from "react";
+import stackblitzSdk from "@stackblitz/sdk";
+import {SandpackFiles} from "@codesandbox/sandpack-react/types";
+
+import {StackblitzIcon} from "./icons";
+
+import {useStackblitz} from "@/hooks/use-stackblitz";
+import {Tooltip} from "@/../../packages/components/tooltip/src";
+import {Button, ButtonProps} from "@/../../packages/components/button/src";
+
+export interface StackblitzButtonProps extends ButtonProps {
+  files: SandpackFiles;
+  typescriptStrict?: boolean;
+  className?: string;
+  button?: React.ReactElement;
+  icon?: React.ReactNode;
+}
+
+export const StackblitzButton = forwardRef<HTMLButtonElement, StackblitzButtonProps>(
+  (props, ref) => {
+    const {
+      files,
+      typescriptStrict = false,
+      className,
+      button = <Button />,
+      icon = (
+        <StackblitzIcon
+          data-visible
+          className="opacity-0 data-[visible=true]:opacity-100 transition-transform-opacity"
+        />
+      ),
+      ...rest
+    } = props;
+    const {stackblitzPrefillConfig, entryFile} = useStackblitz({
+      files,
+      typescriptStrict,
+    });
+
+    return (
+      <Tooltip closeDelay={0} content="Open in Stackblitz">
+        {React.cloneElement(button, {
+          ref,
+          className,
+          icon,
+          onPress: () => {
+            stackblitzSdk.openProject(stackblitzPrefillConfig, {
+              openFile: [entryFile],
+            });
+          },
+          children: icon,
+          ...rest,
+        })}
+      </Tooltip>
+    );
+  },
+);
+
+StackblitzButton.displayName = "StackblitzButton";

apps/docs/config/github-info.json

@@ -1,6 +1,6 @@
 {
-  "stars": { "raw": 22226, "formatted": "22.2K" },
-  "forks": 1566,
-  "subscribers": 83,
-  "openIssues": 406
+  "stars": { "raw": 22380, "formatted": "22.4K" },
+  "forks": 1580,
+  "subscribers": 85,
+  "openIssues": 428
 }

apps/docs/config/routes.json

@@ -81,6 +81,13 @@
           "title": "Astro",
           "keywords": "astro, nextui",
           "path": "/docs/frameworks/astro.mdx"
+        },
+        {
+          "key": "laravel",
+          "title": "Laravel",
+          "keywords": "laravel, nextui",
+          "path": "/docs/frameworks/laravel.mdx",
+          "newPost": true
         }
       ]
     },
@@ -515,4 +522,4 @@
       ]
     }
   ]
-}
+}

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

@@ -87,7 +87,7 @@ NextUI version **v2.6.0** comes with 4 new components **Form**, **Drawer**, **In
 
 ## Form Component
 
-Built on [React Aria's Form](https://react-spectrum.adobe.com/react-aria/forms.html#forms) component, the [Form](/docs/components/forms) component provides accessible form handling with built-in submission, validation and error management.
+Built on [React Aria's Form](https://react-spectrum.adobe.com/react-aria/forms.html#forms) component, the [Form](/docs/components/form) component provides accessible form handling with built-in submission, validation and error management.
 
 <Spacer y={4} />
 
@@ -313,7 +313,7 @@ function Example() {
 - **Form Libraries Support**: Supports popular form libraries like `react-hook-form` and `formik`
 - **Accessibility**: Built-in accessibility features including ARIA attributes and keyboard navigation
 
-Check out our [Forms documentation](/docs/components/forms) for a deep dive into all the features and capabilities.
+Check out our [Forms documentation](/docs/components/form) for a deep dive into all the features and capabilities.
 
 <Spacer y={4} />
 
@@ -566,7 +566,7 @@ declare module "@react-types/shared" {
 - **Improved Base Path Support**: Better handling of base paths through the new `useHref` prop in `NextUIProvider`
 - **Framework-specific Optimizations**: Built-in support for Next.js (both App and Pages Router), React Router, Remix, and TanStack Router
 
-See the [Routing documentation](/docs/guides/routing) for more details.
+See the [Routing documentation](/docs/guide/routing) for more details.
 
 <Spacer y={4} />
 

apps/docs/content/components/input/built-in-validation.raw.jsx

@@ -0,0 +1,40 @@
+import {Button, Form, Input} from "@nextui-org/react";
+
+export default function App() {
+  const [submitted, setSubmitted] = React.useState(null);
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = Object.fromEntries(new FormData(e.currentTarget));
+
+    setSubmitted(data);
+  };
+
+  return (
+    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+      <Input
+        isRequired
+        errorMessage={({validationDetails, validationErrors}) => {
+          if (validationDetails.typeMismatch) {
+            return "Please enter a valid email address";
+          }
+
+          return validationErrors;
+        }}
+        label="Email"
+        labelPlacement="outside"
+        name="email"
+        placeholder="Enter your email"
+        type="email"
+      />
+      <Button color="primary" type="submit">
+        Submit
+      </Button>
+      {submitted && (
+        <div className="text-small text-default-500">
+          You submitted: <code>{JSON.stringify(submitted)}</code>
+        </div>
+      )}
+    </Form>
+  );
+}

apps/docs/content/components/input/built-in-validation.ts

@@ -0,0 +1,9 @@
+import App from "./built-in-validation.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/input/custom-validation.raw.jsx

@@ -0,0 +1,40 @@
+import {Button, Form, Input} from "@nextui-org/react";
+
+export default function App() {
+  const [submitted, setSubmitted] = React.useState(null);
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = Object.fromEntries(new FormData(e.currentTarget));
+
+    setSubmitted(data);
+  };
+
+  return (
+    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+      <Input
+        isRequired
+        label="Username"
+        labelPlacement="outside"
+        name="username"
+        placeholder="Enter your username"
+        type="text"
+        validate={(value) => {
+          if (value.length < 3) {
+            return "Username must be at least 3 characters long";
+          }
+
+          return value === "admin" ? "Nice try!" : null;
+        }}
+      />
+      <Button color="primary" type="submit">
+        Submit
+      </Button>
+      {submitted && (
+        <div className="text-small text-default-500">
+          You submitted: <code>{JSON.stringify(submitted)}</code>
+        </div>
+      )}
+    </Form>
+  );
+}

apps/docs/content/components/input/custom-validation.ts

@@ -0,0 +1,9 @@
+import App from "./custom-validation.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

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

@@ -14,6 +14,10 @@ import startEndContent from "./start-end-content";
 import errorMessage from "./error-message";
 import regexValidation from "./regex-validation";
 import controlled from "./controlled";
+import builtInValidation from "./built-in-validation";
+import customValidation from "./custom-validation";
+import realTimeValidation from "./real-time-validation";
+import serverValidation from "./server-validation";
 import customStyles from "./custom-styles";
 import customImpl from "./custom-impl";
 
@@ -34,6 +38,10 @@ export const inputContent = {
   errorMessage,
   regexValidation,
   controlled,
+  builtInValidation,
+  customValidation,
+  realTimeValidation,
+  serverValidation,
   customStyles,
   customImpl,
 };

apps/docs/content/components/input/real-time-validation.raw.jsx

@@ -0,0 +1,53 @@
+import {Button, Form, Input} from "@nextui-org/react";
+
+export default function App() {
+  const [submitted, setSubmitted] = React.useState(null);
+  const [password, setPassword] = React.useState("");
+  const errors = [];
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = Object.fromEntries(new FormData(e.currentTarget));
+
+    setSubmitted(data);
+  };
+
+  if (password.length < 4) {
+    errors.push("Password must be 4 characters or more.");
+  }
+  if ((password.match(/[A-Z]/g) || []).length < 1) {
+    errors.push("Password must include at least 1 upper case letter");
+  }
+  if ((password.match(/[^a-z0-9]/gi) || []).length < 1) {
+    errors.push("Password must include at least 1 symbol.");
+  }
+
+  return (
+    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+      <Input
+        errorMessage={() => (
+          <ul>
+            {errors.map((error, i) => (
+              <li key={i}>{error}</li>
+            ))}
+          </ul>
+        )}
+        isInvalid={errors.length > 0}
+        label="Password"
+        labelPlacement="outside"
+        name="password"
+        placeholder="Enter your password"
+        value={password}
+        onValueChange={setPassword}
+      />
+      <Button color="primary" type="submit">
+        Submit
+      </Button>
+      {submitted && (
+        <div className="text-small text-default-500">
+          You submitted: <code>{JSON.stringify(submitted)}</code>
+        </div>
+      )}
+    </Form>
+  );
+}

apps/docs/content/components/input/real-time-validation.ts

@@ -0,0 +1,9 @@
+import App from "./real-time-validation.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/input/server-validation.raw.jsx

@@ -0,0 +1,49 @@
+import {Button, Form, Input} from "@nextui-org/react";
+
+export default function App() {
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [errors, setErrors] = React.useState({});
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    const data = Object.fromEntries(new FormData(e.currentTarget));
+    const result = await callServer(data);
+
+    setErrors(result.errors);
+    setIsLoading(false);
+  };
+
+  return (
+    <Form
+      className="w-full max-w-xs"
+      validationBehavior="native"
+      validationErrors={errors}
+      onSubmit={onSubmit}
+    >
+      <Input
+        isRequired
+        isDisabled={isLoading}
+        label="Username"
+        labelPlacement="outside"
+        name="username"
+        placeholder="Enter your username"
+      />
+      <Button color="primary" isLoading={isLoading} type="submit">
+        Submit
+      </Button>
+    </Form>
+  );
+}
+
+// Fake server used in this example.
+async function callServer(_) {
+  await new Promise((resolve) => setTimeout(resolve, 500));
+
+  return {
+    errors: {
+      username: "Sorry, this username is taken.",
+    },
+  };
+}

apps/docs/content/components/input/server-validation.ts

@@ -0,0 +1,9 @@
+import App from "./server-validation.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/modal/draggable-overflow.raw.jsx

@@ -11,8 +11,9 @@ import {
 
 export default function App() {
   const {isOpen, onOpen, onOpenChange} = useDisclosure();
+
   const targetRef = React.useRef(null);
-  const {moveProps} = useDraggable({targetRef, canOverflow: true});
+  const {moveProps} = useDraggable({targetRef, canOverflow: true, isDisabled: !isOpen});
 
   return (
     <>

apps/docs/content/components/switch/custom-styles.raw.jsx

@@ -14,10 +14,10 @@ export default function App() {
           "w-6 h-6 border-2 shadow-lg",
           "group-data-[hover=true]:border-primary",
           //selected
-          "group-data-[selected=true]:ml-6",
+          "group-data-[selected=true]:ms-6",
           // pressed
           "group-data-[pressed=true]:w-7",
-          "group-data-[selected]:group-data-[pressed]:ml-4",
+          "group-data-[selected]:group-data-[pressed]:ms-4",
         ),
       }}
     >

apps/docs/content/components/table/disallow-empty-selection.raw.jsx

@@ -9,11 +9,11 @@ import {
   Radio,
 } from "@nextui-org/react";
 
-const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
-
 export default function App() {
   const [selectedColor, setSelectedColor] = React.useState("default");
 
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
   return (
     <div className="flex flex-col gap-3">
       <Table

apps/docs/content/components/table/multiple-selection.raw.jsx

@@ -9,11 +9,11 @@ import {
   Radio,
 } from "@nextui-org/react";
 
-const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
-
 export default function App() {
   const [selectedColor, setSelectedColor] = React.useState("default");
 
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
   return (
     <div className="flex flex-col gap-3">
       <Table

apps/docs/content/components/table/single-selection.raw.jsx

@@ -9,11 +9,11 @@ import {
   Radio,
 } from "@nextui-org/react";
 
-const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
-
 export default function App() {
   const [selectedColor, setSelectedColor] = React.useState("default");
 
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
   return (
     <div className="flex flex-col gap-3">
       <Table

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

@@ -306,6 +306,7 @@ building buttons that work well across devices and interaction methods.
     },
     {
       attribute: "onClick",
+      deprecated: true,
       type: "MouseEventHandler",
       description: "The native button click event handler (Deprecated) use onPress instead.",
       default: "-"

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

@@ -85,6 +85,7 @@ The `isIndeterminate` prop sets a `Checkbox` to an indeterminate state, overridi
 
 - **base**: Checkbox wrapper, it handles alignment, placement, and general appearance.
 - **wrapper**: An inner container that includes styles for relative positioning, flex properties, overflow handling and managing hover and selected states.
+- **hiddenInput**: The hidden input element that is used to handle the checkbox state.
 - **icon**: Icon within the checkbox, controlling size, visibility, and changes when checked.
 - **label**: The text associated with the checkbox.
 

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

@@ -129,9 +129,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
+    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
   }}
 />
 
@@ -177,9 +177,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
+    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
   }}
 />
 

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

@@ -144,9 +144,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
+    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
   }}
 />
 
@@ -192,9 +192,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
+    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
   }}
 />
 
@@ -214,9 +214,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
+    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
   }}
 />
 
@@ -246,9 +246,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
+    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
   }}
 />
 

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

@@ -161,9 +161,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
+    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
   }}
 />
 
@@ -209,9 +209,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
+    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
   }}
 />
 
@@ -231,9 +231,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
+    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
   }}
 />
 
@@ -256,9 +256,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
+    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
   }}
 />
 
@@ -276,9 +276,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.2",
+    npm: "npm install @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    yarn: "yarn add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
+    pnpm: "pnpm add @internationalized/date@3.6.0 @react-aria/i18n@3.12.4",
   }}
 />
 

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

@@ -772,6 +772,7 @@ you to customize each item individually.
     },
     {
       attribute: "onClick",
+      deprecated: true,
       type: "MouseEventHandler",
       description: "The native button click event handler (**Deprecated**) use **onPress** instead.",
       default: "-"

apps/docs/content/docs/components/form.mdx

@@ -67,7 +67,7 @@ The `onSubmit` event will be triggered when a user submits the form with the `En
 
 <CodeDemo title="Validation" files={formContent.serverValidation} />
 
-See the [Forms](/docs/guides/forms) guide to learn more about form validation, including client-side validation, and integration with other frameworks and libraries.
+See the [Forms](/docs/guide/forms) guide to learn more about form validation, including client-side validation, and integration with other frameworks and libraries.
 
 
 ### Validation Behavior

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

@@ -303,6 +303,12 @@ You can customize the styles of the `InputOtp` component using the `classNames`
       description: "Allows to set custom class names for the Input slots.",
       default: "-"
     },
+    {
+      attribute: "autoFocus",
+      type: "boolean",
+      description: "Whether the element should receive focus on render.",
+      default: "false"
+    },
     {
       attribute: "textAlign",
       type: "left | center | right",

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

@@ -125,6 +125,43 @@ You can use the `value` and `onValueChange` properties to control the input valu
 > **Note**: NextUI `Input` also supports native events like `onChange`, useful for form libraries
 > such as [Formik](https://formik.org/) and [React Hook Form](https://react-hook-form.com/).
 
+### With Form
+
+`Input` can be used with a `Form` component to leverage form state management. By default, `Form` components use `validationBehavior="aria"`, which will not block form submission if any inputs are invalid. For more on form and validation behaviors, see the [Forms](/docs/guide/forms) guide.
+
+#### Built-in Validation
+
+`Input` supports the following [native HTML constraints](https://developer.mozilla.org/docs/Web/HTML/Constraint_validation):
+
+- `isRequired` indicates that a field must have a value before the form can be submitted.
+- `minLength` and `maxLength` specify the minimum and length of text input.
+- `pattern` provides a custom regular expression that a text input must conform to.
+- `type="email"` and `type="url"` provide built-in validation for email addresses and URLs.
+
+When using native validation, error messages can be customized by passing a function to `errorMessage` and checking the [ValidityState](https://developer.mozilla.org/docs/Web/API/ValidityState) of `validationDetails`.
+
+<CodeDemo title="Built-in Validation" files={inputContent.builtInValidation} />
+
+#### Custom Validation
+
+In addition to built-in constraints, you can provide a function to the `validate` property for custom validation.
+
+<CodeDemo title="Custom Validation" files={inputContent.customValidation} />
+
+#### Realtime Validation
+
+If you want to display validation errors while the user is typing, you can control the field value and use the `isInvalid` prop along with the `errorMessage` prop.
+
+<CodeDemo title="Realtime Validation" files={inputContent.realTimeValidation} />
+
+#### Server Validation
+
+Client-side validation provides immediate feedback, but you should also validate data on the server to ensure accuracy and security.
+NextUI allows you to display server-side validation errors by using the `validationErrors` prop in the `Form` component.
+This prop should be an object where each key is the field `name` and the value is the error message.
+
+<CodeDemo title="Server Validation" files={inputContent.serverValidation} />
+
 ## Slots
 
 - **base**: Input wrapper, it handles alignment, placement, and general appearance.
@@ -274,6 +311,30 @@ In case you need to customize the input even further, you can use the `useInput`
       description: "Whether to use native HTML form validation or ARIA validation. When wrapped in a Form component, the default is `aria`. Otherwise, the default is `native`.",
       default: "native"
     },
+    {
+      attribute: "minLength",
+      type: "number",
+      description: "The minimum length of the text input.",
+      default: "-"
+    },
+    {
+      attribute: "maxLength",
+      type: "number",
+      description: "The maximum length of the text input.",
+      default: "-"
+    },
+    {
+      attribute: "pattern",
+      type: "string",
+      description: "A regular expression that the input value is checked against.",
+      default: "-"
+    },
+    {
+      attribute: "type",
+      type: "text | email | url | password | tel | search | file",
+      description: "The type of the input.",
+      default: "text"
+    },
     {
       attribute: "startContent",
       type: "ReactNode",

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

@@ -275,6 +275,7 @@ In case you need to customize the link even further, you can use the `useLink` h
     },
     {
       attribute: "onClick",
+      deprecated: true,
       type: "MouseEventHandler",
       description: "The native link click event handler (Deprecated) use onPress instead.",
       default: "-"

apps/docs/content/docs/components/listbox.mdx

@@ -657,6 +657,7 @@ You can customize the `Listbox` items style by using the `itemClasses` prop and
     },
     {
       attribute: "onClick",
+      deprecated: true,
       type: "MouseEventHandler",
       description: "The native button click event handler (Deprecated) use onPress instead.",
       default: "-"

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

@@ -83,6 +83,7 @@ You can use the `value` and `onValueChange` properties to control the radio inpu
 - Radio Slots
   - **base**: Radio root wrapper, it wraps all elements.
   - **wrapper**: Radio wrapper, it wraps the control element.
+  - **hiddenInput**: The hidden input element that is used to handle the radio state.
   - **labelWrapper**: Label and description wrapper.
   - **label**: Label slot for the radio.
   - **control**: Control element, it is the circle element.

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

@@ -376,7 +376,6 @@ the popover and listbox components.
 - Keyboard support for opening the listbox using the arrow keys, including automatically focusing the first or last item accordingly.
 - Typeahead to allow selecting options by typing text, even without opening the listbox.
 - Browser autofill integration via a hidden native `<select>` element.
-- Support for mobile form navigation via software keyboard.
 - Mobile screen reader listbox dismissal support.
 
 <Spacer y={4} />

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

@@ -79,6 +79,7 @@ You can also add icons to start and end of the switch by using `startContent` an
 
 - **base**: Base slot for the switch. It is the main wrapper.
 - **wrapper**: The wrapper of the start icon, end icon and thumb.
+- **hiddenInput**: The hidden input element that is used to handle the switch state.
 - **thumb**: The thumb element of the switch. It is the circle element.
 - **label**: The label slot of the switch.
 - **startContent**: The icon slot at the start of the switch.

apps/docs/content/docs/frameworks/laravel.mdx

@@ -0,0 +1,238 @@
+---
+title: Laravel
+description: How to use NextUI with Laravel
+---
+
+# Laravel
+
+Requirements:
+
+- [Laravel 11](https://laravel.com/)
+- [PHP v8.2](https://www.php.net/)
+- [React 18](https://reactjs.org/) or later
+- [Tailwind CSS 3.4](https://tailwindcss.com/docs/guides/vite#react) or later
+- [Framer Motion 11.9](https://www.framer.com/motion/) or later
+
+------
+
+<CarbonAd/>
+
+To use NextUI in your Laravel project, you need to follow the following steps:
+
+### Using NextUI + Laravel template
+
+If you are starting a new project, you can run one of the following commands to create a Laravel project pre-configured with NextUI:
+
+<PackageManagers
+  commands={{
+    npm: 'npx create-laravel@latest --template https://github.com/nextui-org/laravel-template',
+    yarn: 'yarn create laravel --template https://github.com/nextui-org/laravel-template',
+    pnpm: 'pnpm create laravel --template https://github.com/nextui-org/laravel-template',
+    bun: 'bunx create-laravel@latest --template https://github.com/nextui-org/laravel-template',
+  }}
+/>
+
+### Automatic Installation
+
+You can add individual components using the CLI. For example, to add a button component:
+
+```codeBlock bash
+nextui add button
+```
+
+This command adds the Button component to your project and manages all related dependencies.
+
+You can also add multiple components at once:
+
+```codeBlock bash
+nextui add button input
+```
+
+Or you can add the main library `@nextui-org/react` by running the following command:
+
+```codeBlock bash
+nextui add --all
+```
+
+If you leave out the component name, the CLI will prompt you to select the components you want to add.
+
+```codeBlock bash
+? Which components would you like to add? › - Space to select. Return to submit
+Instructions:
+    ↑/↓: Highlight option
+    ←/→/[space]: Toggle selection
+    [a,b,c]/delete: Filter choices
+    enter/return: Complete answer
+
+Filtered results for: Enter something to filter
+
+◯  accordion
+◯  autocomplete
+◯  avatar
+◯  badge
+◯  breadcrumbs
+◉  button
+◯  card
+◯  checkbox
+◯  chip
+◯  code
+```
+
+You still need to add the provider to your app manually (we are working on automating this step).
+
+```jsx {3,7,9}
+// app/providers.tsx
+
+import {NextUIProvider} from '@nextui-org/react'
+
+export function Providers({children}: { children: React.ReactNode }) {
+  return (
+    <NextUIProvider>
+      {children}
+    </NextUIProvider>
+  )
+}
+```
+
+<Spacer y={4} />
+
+```jsx {8,23,25}
+// app.tsx or app.jsx
+import '../css/app.css';
+import './bootstrap';
+
+import { createInertiaApp } from '@inertiajs/react';
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import { createRoot } from 'react-dom/client';
+import {NextUIProvider} from "@nextui-org/react";
+
+const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
+
+createInertiaApp({
+    title: (title) => `${title} - ${appName}`,
+    resolve: (name) =>
+        resolvePageComponent(
+            `./Pages/${name}.tsx`,
+            import.meta.glob('./Pages/**/*.tsx'),
+        ),
+    setup({ el, App, props }) {
+        const root = createRoot(el);
+
+        root.render(
+            <NextUIProvider>
+                <App {...props} />
+            </NextUIProvider>
+        );
+    },
+    progress: {
+        color: '#4B5563',
+    },
+});
+```
+
+### Manual Installation
+
+<Steps>
+
+### Add dependencies
+
+In your Laravel project, run one of the following command to install NextUI:
+
+<PackageManagers
+  commands={{
+    npm: 'npm i @nextui-org/react framer-motion',
+    yarn: 'yarn add @nextui-org/react framer-motion',
+    pnpm: 'pnpm add @nextui-org/react framer-motion',
+    bun: "bun add @nextui-org/react framer-motion"
+  }}
+/>
+
+### Hoisted Dependencies Setup
+
+<Blockquote color="primary">
+**Note**: This step is only for those who use `pnpm` to install. If you install NextUI using other package managers, you may skip this step.
+</Blockquote>
+
+If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
+
+```bash
+public-hoist-pattern[]=*@nextui-org/*
+```
+
+After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
+
+### Tailwind CSS Setup
+
+NextUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
+[installation guide](https://tailwindcss.com/docs/guides/vite#react) to install Tailwind CSS. Then you need to add
+the following code to your `tailwind.config.js` file:
+
+<Blockquote color="primary">
+**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules`
+</Blockquote>
+
+```js {2,8,13-14}
+// tailwind.config.js
+const { nextui } = require("@nextui-org/react");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    // ...
+    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
+  ],
+  theme: {
+    extend: {},
+  },
+  darkMode: "class",
+  plugins: [nextui()]
+}
+```
+
+### Provider Setup
+
+After installing NextUI, you need to set up the `NextUIProvider` at the `root` of your application.
+
+Go to the src directory and inside `app.jsx` or `app.tsx`, wrap `NextUIProvider` around App:
+
+```jsx {8,23,25}
+// app.tsx or app.jsx
+import '../css/app.css';
+import './bootstrap';
+
+import { createInertiaApp } from '@inertiajs/react';
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import { createRoot } from 'react-dom/client';
+import {NextUIProvider} from "@nextui-org/react";
+
+const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
+
+createInertiaApp({
+    title: (title) => `${title} - ${appName}`,
+    resolve: (name) =>
+        resolvePageComponent(
+            `./Pages/${name}.tsx`,
+            import.meta.glob('./Pages/**/*.tsx'),
+        ),
+    setup({ el, App, props }) {
+        const root = createRoot(el);
+
+        root.render(
+            <NextUIProvider>
+                <App {...props} />
+            </NextUIProvider>
+        );
+    },
+    progress: {
+        color: '#4B5563',
+    },
+});
+```
+
+</Steps>
+
+<Blockquote
+ color="warning"
+>
+  Version 2 is only compatible with React 18 or later. If you are using React 17 or earlier, please use <Link href="https://v1.nextui.org/docs/getting-started" isExternal>version 1 of NextUI</Link>.
+</Blockquote>

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

@@ -27,18 +27,23 @@ directly in your React Server Components (RSC).
 
 ### NextUI CLI (recommended)
 
-If you are starting a new project, you can use the NextUI CLI to create a new project with NextUI pre-configured:
-
-```bash
-npm install -g nextui-cli
-```
-
-<Spacer y={4}/>
+If you are starting a new project, you can use the [NextUI CLI](https://nextui.org/docs/guide/cli) to create a new project with NextUI pre-configured:
 
 ```bash
 nextui init -t app
 ```
 
+or
+
+<PackageManagers
+  commands={{
+    npm: 'npx nextui-cli@latest init -t app',
+    yarn: 'yarn dlx nextui-cli@latest init -t app',
+    pnpm: 'pnpm dlx nextui-cli@latest init -t app',
+    bun: "bunx nextui-cli@latest init -t app"
+  }}
+/>
+
 ### create-next-app 
 
 If you are starting a new project, you can run one of the following commands to create a Next.js project pre-configured with NextUI:
@@ -47,7 +52,8 @@ If you are starting a new project, you can run one of the following commands to
   commands={{
     npm: 'npx create-next-app -e https://github.com/nextui-org/next-app-template',
     yarn: 'yarn create next-app -e https://github.com/nextui-org/next-app-template',
-    pnpm: 'pnpm create next-app -e https://github.com/nextui-org/next-app-template'
+    pnpm: 'pnpm create next-app -e https://github.com/nextui-org/next-app-template',
+    bun: 'bunx create-next-app -e https://github.com/nextui-org/next-app-template'
   }}
 />
 

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

@@ -17,9 +17,109 @@ Requirements:
 
 To use NextUI in your Remix project, you need to follow the following steps:
 
+### Using NextUI + Remix template
+
+If you are starting a new project, you can run one of the following commands to create a Remix project pre-configured with NextUI:
+
+<PackageManagers
+  commands={{
+    npm: 'npx create-remix@latest --template https://github.com/nextui-org/remix-template',
+    yarn: 'yarn create remix --template https://github.com/nextui-org/remix-template',
+    pnpm: 'pnpm create remix --template https://github.com/nextui-org/remix-template',
+    bun: 'bunx create-remix@latest --template https://github.com/nextui-org/remix-template',
+  }}
+/>
+
+### Automatic Installation
+
+You can add individual components using the CLI. For example, to add a button component:
+
+```codeBlock bash
+nextui add button
+```
+
+This command adds the Button component to your project and manages all related dependencies.
+
+You can also add multiple components at once:
+
+```codeBlock bash
+nextui add button input
+```
+
+Or you can add the main library `@nextui-org/react` by running the following command:
+
+```codeBlock bash
+nextui add --all
+```
+
+If you leave out the component name, the CLI will prompt you to select the components you want to add.
+
+```codeBlock bash
+? Which components would you like to add? › - Space to select. Return to submit
+Instructions:
+    ↑/↓: Highlight option
+    ←/→/[space]: Toggle selection
+    [a,b,c]/delete: Filter choices
+    enter/return: Complete answer
+
+Filtered results for: Enter something to filter
+
+◯  accordion
+◯  autocomplete
+◯  avatar
+◯  badge
+◯  breadcrumbs
+◉  button
+◯  card
+◯  checkbox
+◯  chip
+◯  code
+```
+
+You still need to add the provider to your app manually (we are working on automating this step).
+
+```jsx {3,7,9}
+// app/providers.tsx
+
+import {NextUIProvider} from '@nextui-org/react'
+
+export function Providers({children}: { children: React.ReactNode }) {
+  return (
+    <NextUIProvider>
+      {children}
+    </NextUIProvider>
+  )
+}
+```
+
+<Spacer y={4} />
+
+```jsx {6,10,12,14}
+// app/layout.tsx
+
+// globals.css includes @tailwind directives
+// adjust the path if necessary
+import "@/styles/globals.css";
+import {Providers} from "./providers";
+
+export default function RootLayout({children}: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className='dark'>
+      <body>
+        <Providers>
+          {children}
+        </Providers>
+      </body>
+    </html>
+  );
+}
+```
+
+### Manual Installation
+
 <Steps>
 
-### Installation
+### Add dependencies
 
 In your Remix project, run one of the following command to install NextUI:
 

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

@@ -18,9 +18,128 @@ Requirements:
 
 To use NextUI in your Vite project, you need to follow the following steps:
 
+### NextUI CLI (recommended)
+
+If you are starting a new project, you can use the [NextUI CLI](https://nextui.org/docs/guide/cli) to create a new project with NextUI pre-configured:
+
+```bash
+nextui init -t vite
+```
+
+or
+
+<PackageManagers
+  commands={{
+    npm: 'npx nextui-cli@latest init -t vite',
+    yarn: 'yarn dlx nextui-cli@latest init -t vite',
+    pnpm: 'pnpm dlx nextui-cli@latest init -t vite',
+    bun: "bunx nextui-cli@latest init -t vite"
+  }}
+/>
+
+### Using NextUI + Vite template
+
+If you are starting a new project, you can run one of the following commands to create a Vite project pre-configured with NextUI:
+
+<PackageManagers
+  commands={{
+    npm: 'npx degit https://github.com/nextui-org/vite-template my-vite-app',
+    yarn: 'yarn dlx degit https://github.com/nextui-org/vite-template my-vite-app',
+    pnpm: 'pnpm dlx degit https://github.com/nextui-org/vite-template my-vite-app',
+    bun: 'bunx degit https://github.com/nextui-org/vite-template my-vite-app',
+  }}
+/>
+
+### Automatic Installation
+
+You can add individual components using the CLI. For example, to add a button component:
+
+```codeBlock bash
+nextui add button
+```
+
+This command adds the Button component to your project and manages all related dependencies.
+
+You can also add multiple components at once:
+
+```codeBlock bash
+nextui add button input
+```
+
+Or you can add the main library `@nextui-org/react` by running the following command:
+
+```codeBlock bash
+nextui add --all
+```
+
+If you leave out the component name, the CLI will prompt you to select the components you want to add.
+
+```codeBlock bash
+? Which components would you like to add? › - Space to select. Return to submit
+Instructions:
+    ↑/↓: Highlight option
+    ←/→/[space]: Toggle selection
+    [a,b,c]/delete: Filter choices
+    enter/return: Complete answer
+
+Filtered results for: Enter something to filter
+
+◯  accordion
+◯  autocomplete
+◯  avatar
+◯  badge
+◯  breadcrumbs
+◉  button
+◯  card
+◯  checkbox
+◯  chip
+◯  code
+```
+
+You still need to add the provider to your app manually (we are working on automating this step).
+
+```jsx {3,7,9}
+// app/providers.tsx
+
+import {NextUIProvider} from '@nextui-org/react'
+
+export function Providers({children}: { children: React.ReactNode }) {
+  return (
+    <NextUIProvider>
+      {children}
+    </NextUIProvider>
+  )
+}
+```
+
+<Spacer y={4} />
+
+```jsx {6,10,12,14}
+// app/layout.tsx
+
+// globals.css includes @tailwind directives
+// adjust the path if necessary
+import "@/styles/globals.css";
+import {Providers} from "./providers";
+
+export default function RootLayout({children}: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className='dark'>
+      <body>
+        <Providers>
+          {children}
+        </Providers>
+      </body>
+    </html>
+  );
+}
+```
+
+### Manual Installation
+
 <Steps>
 
-### Installation
+### Add dependencies
 
 In your Vite React project, run one of the following command to install NextUI:
 

apps/docs/content/docs/guide/forms.mdx

@@ -36,7 +36,7 @@ Most fields should have a visible label. In rare exceptions, the `aria-label` or
 
 ## Submitting data
 
-How you submit form data depends on your framework, application, and server. By default,**HTML** forms are submitted via a full-page refresh in the browser.
+How you submit form data depends on your framework, application, and server. By default, **HTML** forms are submitted via a full-page refresh in the browser.
 You can call `preventDefault` in the `onSubmit` event to handle form data submission via an API.
 
 Frameworks like [Next.js](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#forms), [Remix](https://remix.run/docs/en/main/guides/forms), and [React Router](https://reactrouter.com/en/main/route/form-submission) provide their own ways to handle form submission.
@@ -196,7 +196,7 @@ NextUI supports native HTML constraint validation and allows for custom validati
 #### Built-in validation
 
 NextUI form components support [native HTML validation](https://developer.mozilla.org/docs/Web/HTML/Constraint_validation) attributes like `isRequired` and `minLength`.
-These constraints are checked by the browser when the user commits changes (e.g., onBlur) or submits the form.
+These constraints are checked by the browser when the user commits changes (e.g., on blur) or submits the form.
 You can display validation errors with custom styles instead of the browser's default UI.
 
 ```tsx {10}
@@ -235,7 +235,7 @@ Supported constraints include:
 - `minValue` and `maxValue` specify the minimum and maximum value in a date picker or number field.
 - `minLength` and `maxLength` specify the minimum and length of text input.
 - `pattern` provides a custom regular expression that a text input must conform to.
-- `type="email"` and `type="url"` provide builtin validation for email addresses and URLs.
+- `type="email"` and `type="url"` provide built-in validation for email addresses and URLs.
 
 See each component's documentation for more details on the supported validation props.
 

apps/docs/content/docs/guide/introduction.mdx

@@ -9,7 +9,7 @@ Welcome to the NextUI documentation!
 
 <NextImage
   priority
-  src="https://nextui.org/nextui-banner.png"
+  src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/nextui-banner.jpeg"
   quality={100}
   width={700}
   height={350}

apps/docs/hooks/use-stackblitz.ts

@@ -0,0 +1,88 @@
+import {Project} from "@stackblitz/sdk";
+import {SandpackFiles} from "@codesandbox/sandpack-react/types";
+
+import {mapKeys, omit} from "@/../../packages/utilities/shared-utils/src";
+import {useSandpack} from "@/components/sandpack/use-sandpack";
+
+export interface UseSandpackProps {
+  files: SandpackFiles;
+  typescriptStrict?: boolean;
+}
+
+const viteConfig = `import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});
+`;
+
+function transformSandpackFiles(files: SandpackFiles) {
+  return Object.fromEntries(
+    Object.entries(files).map(([key, value]) => [
+      key,
+      typeof value === "string" ? value : value.code,
+    ]),
+  );
+}
+
+export function useStackblitz(props: UseSandpackProps) {
+  const {files, typescriptStrict = false} = props;
+
+  const {
+    customSetup,
+    files: filesData,
+    entryFile,
+  } = useSandpack({
+    files: transformSandpackFiles(files),
+    typescriptStrict,
+  });
+
+  const transformFiles = mapKeys(filesData, (_, key) => key.replace(/^\//, ""));
+
+  const dependencies = {...customSetup.dependencies, ...customSetup.devDependencies};
+
+  const packageJson = `{
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    ${Object.entries(omit(dependencies as any, ["react", "react-dom"]))
+      .map(([key, value]) => `"${key}": "${value}"`)
+      .join(",\n    ")}
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "4.3.4",
+    "vite": "6.0.6",
+    "autoprefixer": "10.4.20",
+    "postcss": "8.4.49",
+    "tailwindcss": "3.4.17"
+  },
+  "main": "/index.jsx"
+}`;
+
+  const stackblitzPrefillConfig: Project = {
+    files: {
+      ...transformSandpackFiles(transformFiles),
+      "vite.config.js": viteConfig,
+      "package.json": packageJson,
+    },
+    dependencies,
+    title: "NextUI",
+    template: "node",
+  };
+
+  const findEntryFile = Object.keys(stackblitzPrefillConfig.files).find((key) =>
+    key.includes("App"),
+  );
+
+  return {
+    entryFile: findEntryFile ?? entryFile,
+    stackblitzPrefillConfig,
+  };
+}

apps/docs/next.config.js

@@ -34,24 +34,12 @@ const nextConfig = {
         protocol: "https",
         hostname: "nextui.org",
       },
+      {
+        protocol: "https",
+        hostname: "heroui-assets.nyc3.cdn.digitaloceanspaces.com",
+      },
     ],
   },
-  rewrites: async () => {
-    return [
-      {
-        destination: "https://us-assets.i.posthog.com/static/:path*",
-        source: "/ingest/static/:path*",
-      },
-      {
-        destination: "https://us.i.posthog.com/:path*",
-        source: "/ingest/:path*",
-      },
-      {
-        destination: "https://us.i.posthog.com/decide",
-        source: "/ingest/decide",
-      },
-    ];
-  },
 };
 
 module.exports = withContentlayer(nextConfig);

apps/docs/package.json

@@ -52,8 +52,10 @@
     "@react-stately/layout": "4.1.0",
     "@react-stately/tree": "3.8.6",
     "@rehooks/local-storage": "^2.4.5",
-    "@tanstack/react-virtual": "3.10.9",
+    "@stackblitz/sdk": "^1.11.0",
+    "@tanstack/react-virtual": "3.11.2",
     "canvas-confetti": "^1.9.2",
+    "clsx": "^1.2.1",
     "cmdk": "^0.2.0",
     "color2k": "2.0.3",
     "contentlayer2": "0.5.3",
@@ -72,7 +74,7 @@
     "next-themes": "0.4.3",
     "nprogress": "^0.2.0",
     "parse-numeric-range": "1.2.0",
-    "posthog-js": "1.184.1",
+    "posthog-js": "1.197.0",
     "prism-react-renderer": "^1.2.1",
     "querystring": "^0.2.1",
     "react": "18.2.0",

apps/docs/styles/globals.css

@@ -91,7 +91,7 @@ z-index: 0;
   }
 
   .step:before {
-    @apply absolute w-7 h-7 bg-default-100 rounded-full font-medium text-center text-base inline-flex items-center justify-center -indent-px;
+    @apply absolute w-7 h-7 border-1 border-default-200 bg-default-100 rounded-full font-semibold text-center text-base inline-flex items-center justify-center -indent-px;
     @apply ml-[-41px];
     content: counter(step);
   }

apps/docs/tailwind.config.js

@@ -327,6 +327,10 @@ module.exports = {
           from: {transform: "translateY(0)"},
           to: {transform: "translateY(calc(-50% - var(--gap)/2))"},
         },
+        fadeIn: {
+          "0%": { opacity: 0 },
+          "100%": { opacity: 1 },
+        },
       },
       animation: {
         heartbeat: "heartbeat 1s ease-in-out infinite",
@@ -336,6 +340,7 @@ module.exports = {
         "text-gradient": "text-gradient 4s linear 0s infinite normal forwards running",
         "scrolling-banner": "scrolling-banner var(--duration) linear infinite",
         "scrolling-banner-vertical": "scrolling-banner-vertical var(--duration) linear infinite",
+        fadeIn: "fadeIn 0.5s ease-in-out forwards",
       },
       maxWidth: {
         "8xl": "90rem", // 1440px

packages/components/accordion/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @nextui-org/accordion
 
+## 2.2.7
+
+### Patch Changes
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/divider@2.2.5
+  - @nextui-org/aria-utils@2.2.7
+  - @nextui-org/framer-utils@2.1.6
+
+## 2.2.6
+
+### Patch Changes
+
+- Updated dependencies [[`77206bc`](https://github.com/nextui-org/nextui/commit/77206bc62596894d038b9715e40b361fec286c10), [`5f388fc`](https://github.com/nextui-org/nextui/commit/5f388fc68c7db7f852432e73386686d919d44d31)]:
+  - @nextui-org/shared-utils@2.1.2
+  - @nextui-org/divider@2.2.5
+  - @nextui-org/aria-utils@2.2.6
+  - @nextui-org/framer-utils@2.1.5
+  - @nextui-org/react-utils@2.1.2
+
+## 2.2.5
+
+### Patch Changes
+
+- Updated dependencies [[`78c0928`](https://github.com/nextui-org/nextui/commit/78c09280e30113bd648057ad64ad6198d1e5d58f)]:
+  - @nextui-org/aria-utils@2.2.5
+
 ## 2.2.4
 
 ### Patch Changes

packages/components/accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/accordion",
-  "version": "2.2.4",
+  "version": "2.2.7",
   "description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
   "keywords": [
     "react",

packages/components/alert/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @nextui-org/alert
 
+## 2.2.9
+
+### Patch Changes
+
+- [#4447](https://github.com/nextui-org/nextui/pull/4447) [`a83388a`](https://github.com/nextui-org/nextui/commit/a83388aaf4521f0ed8dfed99a54998156df1868b) Thanks [@wingkwong](https://github.com/wingkwong)! - mark description prop as optional (#4445)
+
+- Updated dependencies [[`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2)]:
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/button@2.2.9
+
+## 2.2.8
+
+### Patch Changes
+
+- [#4383](https://github.com/nextui-org/nextui/pull/4383) [`e15ef62`](https://github.com/nextui-org/nextui/commit/e15ef62b6ccabc5aef2790c6f97d7457f204be92) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix #4382 `hideIconWrapper` property wasn't removing the borded on `Alert` component
+
+- [#4365](https://github.com/nextui-org/nextui/pull/4365) [`5946e90`](https://github.com/nextui-org/nextui/commit/5946e90335c713e361e09927ab459445d707d7e4) Thanks [@wingkwong](https://github.com/wingkwong)! - fix alert slots & variantProps import (#4336)
+
+- [#4354](https://github.com/nextui-org/nextui/pull/4354) [`fa38828`](https://github.com/nextui-org/nextui/commit/fa388283458602cd8e128486323472498a145fa2) Thanks [@wingkwong](https://github.com/wingkwong)! - replace decrepate onClick in Alert
+
+- Updated dependencies [[`77206bc`](https://github.com/nextui-org/nextui/commit/77206bc62596894d038b9715e40b361fec286c10), [`5f388fc`](https://github.com/nextui-org/nextui/commit/5f388fc68c7db7f852432e73386686d919d44d31)]:
+  - @nextui-org/shared-utils@2.1.2
+  - @nextui-org/button@2.2.8
+  - @nextui-org/react-utils@2.1.2
+
+## 2.2.7
+
+### Patch Changes
+
+- Updated dependencies [[`78c0928`](https://github.com/nextui-org/nextui/commit/78c09280e30113bd648057ad64ad6198d1e5d58f)]:
+  - @nextui-org/button@2.2.7
+
+## 2.2.6
+
+### Patch Changes
+
+- Updated dependencies [[`5598806`](https://github.com/nextui-org/nextui/commit/5598806216166dc9fff36cafd9112412486b747f)]:
+  - @nextui-org/button@2.2.6
+
+## 2.2.5
+
+### Patch Changes
+
+- Updated dependencies [[`dfefdd6`](https://github.com/nextui-org/nextui/commit/dfefdd6250eb81ae653e611a8dff12b2ae29a09c)]:
+  - @nextui-org/button@2.2.5
+
 ## 2.2.4
 
 ### Patch Changes

packages/components/alert/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/alert",
-  "version": "2.2.4",
+  "version": "2.2.9",
   "description": "Alerts are temporary notifications that provide concise feedback about an action or event.",
   "keywords": [
     "alert"

packages/components/alert/src/alert.tsx

@@ -24,7 +24,7 @@ const iconMap = {
 
 export type AlertColor = keyof typeof iconMap;
 
-export interface AlertProps extends Omit<UseAlertProps, "hasDescription"> {}
+export interface AlertProps extends Omit<UseAlertProps, "hasContent"> {}
 
 const Alert = forwardRef<"div", AlertProps>((props, ref) => {
   const {
@@ -73,7 +73,7 @@ const Alert = forwardRef<"div", AlertProps>((props, ref) => {
           aria-label="Close"
           radius="full"
           variant="light"
-          onClick={handleClose}
+          onPress={handleClose}
           {...(getCloseButtonProps() as ButtonProps)}
         >
           <CloseIcon height={20} width={20} />

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

@@ -1,9 +1,8 @@
 import type {ButtonProps} from "@nextui-org/button";
+import type {AlertSlots, AlertVariantProps, SlotsToClasses} from "@nextui-org/theme";
 
 import {HTMLNextUIProps, mapPropsVariants, PropGetter} from "@nextui-org/system";
-import {AlertSlots, SlotsToClasses} from "@nextui-org/theme";
 import {filterDOMProps, ReactRef, useDOMRef} from "@nextui-org/react-utils";
-import {AlertVariantProps} from "@nextui-org/theme/src/components/alert";
 import {ReactNode, useCallback, useMemo} from "react";
 import {mergeProps} from "@react-aria/utils";
 import {alert} from "@nextui-org/theme";
@@ -20,9 +19,9 @@ interface Props extends HTMLNextUIProps<"div"> {
    */
   title?: string;
   /**
-   * Main body of the alert message
+   * description of the alert message
    */
-  description: ReactNode;
+  description?: ReactNode;
   /**
    * Icon to be displayed in the alert - overrides the default icon
    */
@@ -125,7 +124,7 @@ export function useAlert(originalProps: UseAlertProps) {
   }, [setIsVisible, onClose]);
 
   const slots = useMemo(
-    () => alert({hasDescription: !isEmpty(description), ...variantProps}),
+    () => alert({hasContent: !isEmpty(description) || !isEmpty(children), ...variantProps}),
     [description, objectToDeps(variantProps)],
   );
 

packages/components/alert/stories/alert.stories.tsx

@@ -189,7 +189,7 @@ const CustomStylesTemplate = (args) => {
           color={color}
           title="The documents you requested are ready to be viewed"
         >
-          <div className="flex items-center gap-1 mt-3">
+          <div className="flex items-center gap-1">
             <Button
               className="bg-background text-default-700 font-medium border-1 shadow-small"
               size="sm"
@@ -226,6 +226,14 @@ export const WithDescription = {
   },
 };
 
+export const WithoutIconWrapper = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    hideIconWrapper: true,
+  },
+};
+
 export const Color = {
   render: ColorTemplate,
   args: {

packages/components/autocomplete/CHANGELOG.md

@@ -1,5 +1,83 @@
 # @nextui-org/autocomplete
 
+## 2.3.9
+
+### Patch Changes
+
+- [#4458](https://github.com/nextui-org/nextui/pull/4458) [`7c2bc4a`](https://github.com/nextui-org/nextui/commit/7c2bc4a18ef01424c7ff464cad3401dd6596e7b3) Thanks [@wingkwong](https://github.com/wingkwong)! - clear autocomplete value when pressing clear button (#4402)
+
+- [#4452](https://github.com/nextui-org/nextui/pull/4452) [`0401f25`](https://github.com/nextui-org/nextui/commit/0401f2548f525fc4194186b54f563cb91c6ccd0c) Thanks [@Peterl561](https://github.com/Peterl561)! - fixed autocomplete validate prop not working after hovering when validation behavior is native
+
+- [#4462](https://github.com/nextui-org/nextui/pull/4462) [`16c57ec`](https://github.com/nextui-org/nextui/commit/16c57ece6467d755645f109b8de810c9063e5665) Thanks [@vinroger](https://github.com/vinroger)! - add support for dataset with section, add support for scrollshadow
+
+- [#4496](https://github.com/nextui-org/nextui/pull/4496) [`0c45fed`](https://github.com/nextui-org/nextui/commit/0c45fed420747b41a4d2a7bb07e9582f6f609287) Thanks [@wingkwong](https://github.com/wingkwong)! - fix missing popover props except content (#4484)
+
+- Updated dependencies [[`d92468a`](https://github.com/nextui-org/nextui/commit/d92468aa1e35d5022c071b5d2674f5bfb6408001), [`33e0418`](https://github.com/nextui-org/nextui/commit/33e0418d08c29f829b00ee3bc41972dfce6a3370), [`16c57ec`](https://github.com/nextui-org/nextui/commit/16c57ece6467d755645f109b8de810c9063e5665), [`e7ff673`](https://github.com/nextui-org/nextui/commit/e7ff6730d7e891f1e9e3ca232b1faaebc5aedef2), [`fb46df2`](https://github.com/nextui-org/nextui/commit/fb46df2430f95cddef0c25fce4639c2078b34f62)]:
+  - @nextui-org/listbox@2.3.9
+  - @nextui-org/popover@2.3.9
+  - @nextui-org/react-utils@2.1.3
+  - @nextui-org/button@2.2.9
+  - @nextui-org/form@2.1.8
+  - @nextui-org/input@2.4.8
+  - @nextui-org/scroll-shadow@2.3.5
+  - @nextui-org/spinner@2.2.6
+  - @nextui-org/aria-utils@2.2.7
+
+## 2.3.8
+
+### Patch Changes
+
+- Updated dependencies [[`b5943db`](https://github.com/nextui-org/nextui/commit/b5943db1fdad3cacba54e10ef828bc24c740f01b), [`9e8a656`](https://github.com/nextui-org/nextui/commit/9e8a656665464152c4d226fa520fc4219eca0a8d), [`77206bc`](https://github.com/nextui-org/nextui/commit/77206bc62596894d038b9715e40b361fec286c10), [`5f388fc`](https://github.com/nextui-org/nextui/commit/5f388fc68c7db7f852432e73386686d919d44d31)]:
+  - @nextui-org/listbox@2.3.8
+  - @nextui-org/input@2.4.7
+  - @nextui-org/shared-utils@2.1.2
+  - @nextui-org/popover@2.3.8
+  - @nextui-org/button@2.2.8
+  - @nextui-org/form@2.1.7
+  - @nextui-org/scroll-shadow@2.3.4
+  - @nextui-org/spinner@2.2.5
+  - @nextui-org/use-aria-button@2.2.4
+  - @nextui-org/aria-utils@2.2.6
+  - @nextui-org/react-utils@2.1.2
+
+## 2.3.7
+
+### Patch Changes
+
+- Updated dependencies [[`78c0928`](https://github.com/nextui-org/nextui/commit/78c09280e30113bd648057ad64ad6198d1e5d58f)]:
+  - @nextui-org/use-aria-button@2.2.3
+  - @nextui-org/aria-utils@2.2.5
+  - @nextui-org/listbox@2.3.7
+  - @nextui-org/button@2.2.7
+  - @nextui-org/popover@2.3.7
+  - @nextui-org/form@2.1.6
+
+## 2.3.6
+
+### Patch Changes
+
+- Updated dependencies [[`5598806`](https://github.com/nextui-org/nextui/commit/5598806216166dc9fff36cafd9112412486b747f)]:
+  - @nextui-org/button@2.2.6
+  - @nextui-org/listbox@2.3.6
+  - @nextui-org/form@2.1.6
+  - @nextui-org/popover@2.3.6
+  - @nextui-org/input@2.4.6
+  - @nextui-org/scroll-shadow@2.3.3
+  - @nextui-org/spinner@2.2.4
+
+## 2.3.5
+
+### Patch Changes
+
+- Updated dependencies [[`11eae5c`](https://github.com/nextui-org/nextui/commit/11eae5cc808e10db07b509f4e06d30441bb1937a), [`dfefdd6`](https://github.com/nextui-org/nextui/commit/dfefdd6250eb81ae653e611a8dff12b2ae29a09c)]:
+  - @nextui-org/listbox@2.3.5
+  - @nextui-org/button@2.2.5
+  - @nextui-org/form@2.1.5
+  - @nextui-org/popover@2.3.5
+  - @nextui-org/input@2.4.5
+  - @nextui-org/scroll-shadow@2.3.3
+  - @nextui-org/spinner@2.2.4
+
 ## 2.3.4
 
 ### Patch Changes

packages/components/autocomplete/__tests__/autocomplete.test.tsx

@@ -235,6 +235,49 @@ describe("Autocomplete", () => {
     expect(autocomplete).toHaveFocus();
   });
 
+  it("should clear arbitrary value after clicking clear button", async () => {
+    const wrapper = render(
+      <Autocomplete aria-label="Favorite Animal" data-testid="autocomplete" label="Favorite Animal">
+        <AutocompleteItem key="penguin" value="penguin">
+          Penguin
+        </AutocompleteItem>
+        <AutocompleteItem key="zebra" value="zebra">
+          Zebra
+        </AutocompleteItem>
+        <AutocompleteItem key="shark" value="shark">
+          Shark
+        </AutocompleteItem>
+      </Autocomplete>,
+    );
+
+    const autocomplete = wrapper.getByTestId("autocomplete");
+
+    // open the select listbox
+    await user.click(autocomplete);
+
+    // assert that the autocomplete listbox is open
+    expect(autocomplete).toHaveAttribute("aria-expanded", "true");
+
+    await user.keyboard("pe");
+
+    const {container} = wrapper;
+
+    const clearButton = container.querySelector(
+      "[data-slot='inner-wrapper'] button:nth-of-type(1)",
+    )!;
+
+    expect(clearButton).not.toBeNull();
+
+    // click the clear button
+    await user.click(clearButton);
+
+    // assert that the input has empty value
+    expect(autocomplete).toHaveValue("");
+
+    // assert that input is focused
+    expect(autocomplete).toHaveFocus();
+  });
+
   it("should keep the ListBox open after clicking clear button", async () => {
     const wrapper = render(
       <Autocomplete aria-label="Favorite Animal" data-testid="autocomplete" label="Favorite Animal">
@@ -739,6 +782,60 @@ describe("Autocomplete", () => {
         expect(input).not.toHaveAttribute("aria-describedby");
         expect(input.validity.valid).toBe(true);
       });
+
+      // this test is to cover a case where hovering over the combobox causes the validation from use-input to overwrite the validation from use-autocomplete if not handled properly
+      // this causes the first form submit after initial render to always succeed even if the validate function returns an error
+      it("should work with validate after hovering", async () => {
+        const onSubmit = jest.fn((e) => {
+          e.preventDefault();
+        });
+
+        const {getByTestId, findByRole} = render(
+          <Form validationBehavior="native" onSubmit={onSubmit}>
+            <AutocompleteExample
+              data-testid="combobox"
+              name="animal"
+              validate={(value) => {
+                if (!value?.selectedKey) {
+                  return "Please select an animal";
+                }
+              }}
+              validationBehavior="native"
+            />
+            <button data-testid="submit" type="submit">
+              Submit
+            </button>
+          </Form>,
+        );
+
+        const combobox = getByTestId("combobox") as HTMLInputElement;
+        const submit = getByTestId("submit");
+
+        expect(combobox).not.toHaveAttribute("aria-describedby");
+        expect(combobox.validity.valid).toBe(false);
+
+        await user.hover(combobox);
+        await user.click(submit);
+
+        expect(onSubmit).toHaveBeenCalledTimes(0);
+        expect(combobox).toHaveAttribute("aria-describedby");
+        expect(
+          document.getElementById(combobox.getAttribute("aria-describedby")!),
+        ).toHaveTextContent("Please select an animal");
+
+        await user.click(combobox);
+        await user.keyboard("pe");
+
+        const listbox = await findByRole("listbox");
+        const items = within(listbox).getAllByRole("option");
+
+        await user.click(items[0]);
+        expect(combobox).toHaveAttribute("aria-describedby");
+
+        await user.click(submit);
+        expect(onSubmit).toHaveBeenCalledTimes(1);
+        expect(combobox).not.toHaveAttribute("aria-describedby");
+      });
     });
 
     describe("validationBehavior=aria", () => {

packages/components/autocomplete/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/autocomplete",
-  "version": "2.3.4",
+  "version": "2.3.9",
   "description": "An autocomplete combines a text input with a listbox, allowing users to filter a list of options to items matching a query.",
   "keywords": [
     "autocomplete"

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

@@ -418,13 +418,9 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
       onPress: (e: PressEvent) => {
         slotsProps.clearButtonProps?.onPress?.(e);
         if (state.selectedItem) {
-          state.setInputValue("");
           state.setSelectedKey(null);
-        } else {
-          if (allowsCustomValue) {
-            state.setInputValue("");
-          }
         }
+        state.setInputValue("");
         state.open();
       },
       "data-visible": !!state.selectedItem || state.inputValue?.length > 0,
@@ -433,12 +429,19 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
       }),
     } as ButtonProps);
 
+  // prevent use-input's useFormValidation hook from overwriting use-autocomplete's useFormValidation hook when there are uncommitted validation errors
+  // see https://github.com/nextui-org/nextui/pull/4452
+  const hasUncommittedValidation =
+    validationBehavior === "native" &&
+    state.displayValidation.isInvalid === false &&
+    state.realtimeValidation.isInvalid === true;
+
   const getInputProps = () =>
     ({
       ...otherProps,
       ...inputProps,
       ...slotsProps.inputProps,
-      isInvalid,
+      isInvalid: hasUncommittedValidation ? undefined : isInvalid,
       validationBehavior,
       errorMessage:
         typeof errorMessage === "function"
@@ -461,6 +464,7 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
             itemHeight,
           }
         : undefined,
+      scrollShadowProps: slotsProps.scrollShadowProps,
       ...mergeProps(slotsProps.listboxProps, listBoxProps, {
         shouldHighlightOnFocus: true,
       }),
@@ -478,6 +482,7 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
       triggerType: "listbox",
       ...popoverProps,
       classNames: {
+        ...slotsProps.popoverProps?.classNames,
         content: slots.popoverContent({
           class: clsx(
             classNames?.popoverContent,