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 (
@@ -99,7 +100,7 @@ export default async function DocPage({params}: DocPageProps) {
         </footer>
       </div>
       {headings && headings.length > 0 && (
-        <div className="hidden z-10 xl:flex xl:col-span-2 mt-8 pl-4">
+        <div className="hidden z-10 xl:flex xl:col-span-2 mt-8 pl-0">
           <DocsToc headings={headings} />
         </div>
       )}

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/examples/table/custom-styles/page.tsx

@@ -360,9 +360,9 @@ export default function Page() {
                 </Button>
               </DropdownTrigger>
               <DropdownMenu>
-                <DropdownItem>View</DropdownItem>
-                <DropdownItem>Edit</DropdownItem>
-                <DropdownItem>Delete</DropdownItem>
+                <DropdownItem key="view">View</DropdownItem>
+                <DropdownItem key="edit">Edit</DropdownItem>
+                <DropdownItem key="delete">Delete</DropdownItem>
               </DropdownMenu>
             </Dropdown>
           </div>

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

@@ -352,9 +352,9 @@ export default function Page() {
                 </Button>
               </DropdownTrigger>
               <DropdownMenu>
-                <DropdownItem>View</DropdownItem>
-                <DropdownItem>Edit</DropdownItem>
-                <DropdownItem>Delete</DropdownItem>
+                <DropdownItem key="view">View</DropdownItem>
+                <DropdownItem key="edit">Edit</DropdownItem>
+                <DropdownItem key="delete">Delete</DropdownItem>
               </DropdownMenu>
             </Dropdown>
           </div>

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-sm 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-small 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": 22002, "formatted": "22K" },
-  "forks": 1536,
+  "stars": { "raw": 22380, "formatted": "22.4K" },
+  "forks": 1580,
   "subscribers": 85,
-  "openIssues": 433
+  "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,11 +87,11 @@ 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} />
 
-<CodeDemo title="Usage" showEditor={false} files={formContent.demo} />
+<CodeDemo title="Usage" files={formContent.demo} />
 
 ### Built-in Validation
 
@@ -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} />
 
@@ -749,7 +749,7 @@ The circular progress Tailwind variants have been moved from `circular-progress`
 - Replaced VA by Posthog by [@wingkwong](https://github.com/wingkwong) in [PR #4123](https://github.com/nextui-org/nextui/pull/4123)
 - Moved circular-progress tv to progress by [@winchesHe](https://github.com/winchesHe) in [PR #3321](https://github.com/nextui-org/nextui/pull/3321)
 
-Special thanks to NextUI Team members [@wingkwong](https://github.com/wingkwong), [@macci001](https://github.com/macci001),
+Special thanks to NextUI Team members [@wingkwong](https://github.com/wingkwong), [@macci001](https://github.com/macci001), [@vinroger](https://github.com/vinroger),
 [@ryo-manba](https://github.com/ryo-manba), [@winchesHe](https://github.com/winchesHe), [@tianenpang](https://github.com/tianenpang) and contributors for their contributions to this release.
 
 For a full list of changes, please refer to the [release notes](https://github.com/nextui-org/nextui/releases/tag/%40nextui-org%2Freact%402.6.2).

apps/docs/content/components/calendar/controlled-focused-value.raw.tsx

@@ -6,7 +6,7 @@ import {today, getLocalTimeZone} from "@internationalized/date";
 
 export default function App() {
   let defaultDate = today(getLocalTimeZone());
-  let [focusedDate, setFocusedDate] = React.useState<DateValue>(defaultDate);
+  let [focusedDate, setFocusedDate] = React.useState<DateValue | null>(defaultDate);
 
   return (
     <Calendar

apps/docs/content/components/calendar/controlled.raw.tsx

@@ -5,7 +5,7 @@ import {Calendar} from "@nextui-org/react";
 import {parseDate} from "@internationalized/date";
 
 export default function App() {
-  let [value, setValue] = React.useState<DateValue>(parseDate("2024-03-07"));
+  let [value, setValue] = React.useState<DateValue | null>(parseDate("2024-03-07"));
 
   return <Calendar aria-label="Date (Controlled)" value={value} onChange={setValue} />;
 }

apps/docs/content/components/calendar/invalid-date.raw.tsx

@@ -6,9 +6,9 @@ import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
 import {useLocale} from "@react-aria/i18n";
 
 export default function App() {
-  let [date, setDate] = React.useState<DateValue>(today(getLocalTimeZone()));
+  let [date, setDate] = React.useState<DateValue | null>(today(getLocalTimeZone()));
   let {locale} = useLocale();
-  let isInvalid = isWeekend(date, locale);
+  let isInvalid = isWeekend(date!, locale);
 
   return (
     <Calendar

apps/docs/content/components/calendar/presets.raw.tsx

@@ -7,7 +7,7 @@ import {useLocale} from "@react-aria/i18n";
 
 export default function App() {
   let defaultDate = today(getLocalTimeZone());
-  let [value, setValue] = React.useState<DateValue>(defaultDate);
+  let [value, setValue] = React.useState<DateValue | null>(defaultDate);
   let {locale} = useLocale();
 
   let now = today(getLocalTimeZone());

apps/docs/content/components/date-input/controlled.raw.tsx

@@ -4,7 +4,7 @@ import {DateValue, parseDate, getLocalTimeZone} from "@internationalized/date";
 import {useDateFormatter} from "@react-aria/i18n";
 
 export default function App() {
-  const [value, setValue] = React.useState<DateValue>(parseDate("2024-04-04"));
+  const [value, setValue] = React.useState<DateValue | null>(parseDate("2024-04-04"));
 
   let formatter = useDateFormatter({dateStyle: "full"});
 

apps/docs/content/components/date-input/granularity.raw.tsx

@@ -3,7 +3,9 @@ import {DateInput} from "@nextui-org/react";
 import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date";
 
 export default function App() {
-  let [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+  let [date, setDate] = React.useState<DateValue | null>(
+    parseAbsoluteToLocal("2021-04-07T18:45:22Z"),
+  );
 
   return (
     <div className="w-full max-w-xl flex flex-col items-start gap-4">

apps/docs/content/components/date-input/international-calendar.raw.tsx

@@ -4,7 +4,9 @@ import {DateValue, parseAbsoluteToLocal} from "@internationalized/date";
 import {I18nProvider} from "@react-aria/i18n";
 
 export default function App() {
-  const [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+  const [date, setDate] = React.useState<DateValue | null>(
+    parseAbsoluteToLocal("2021-04-07T18:45:22Z"),
+  );
 
   return (
     <div className="flex flex-col gap-4">

apps/docs/content/components/date-picker/controlled.raw.tsx

@@ -4,7 +4,7 @@ import {DateValue, parseDate, getLocalTimeZone} from "@internationalized/date";
 import {useDateFormatter} from "@react-aria/i18n";
 
 export default function App() {
-  const [value, setValue] = React.useState<DateValue>(parseDate("2024-04-04"));
+  const [value, setValue] = React.useState<DateValue | null>(parseDate("2024-04-04"));
 
   let formatter = useDateFormatter({dateStyle: "full"});
 

apps/docs/content/components/date-picker/granularity.raw.tsx

@@ -3,7 +3,9 @@ import {DatePicker} from "@nextui-org/react";
 import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date";
 
 export default function App() {
-  let [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+  let [date, setDate] = React.useState<DateValue | null>(
+    parseAbsoluteToLocal("2021-04-07T18:45:22Z"),
+  );
 
   return (
     <div className="w-full max-w-xl flex flex-col items-start gap-4">

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

@@ -35,7 +35,7 @@ const AppTs = `import {DatePicker} from "@nextui-org/react";
 import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date";
 
 export default function App() {
-  let [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+  let [date, setDate] = React.useState<DateValue | null>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
 
   return (
     <div className="w-full max-w-xl flex flex-col items-start gap-4">

apps/docs/content/components/date-picker/international-calendar.raw.tsx

@@ -4,7 +4,9 @@ import {DateValue, parseAbsoluteToLocal} from "@internationalized/date";
 import {I18nProvider} from "@react-aria/i18n";
 
 export default function App() {
-  let [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+  let [date, setDate] = React.useState<DateValue | null>(
+    parseAbsoluteToLocal("2021-04-07T18:45:22Z"),
+  );
 
   return (
     <div className="flex flex-col gap-4">

apps/docs/content/components/date-picker/preset.raw.tsx

@@ -12,7 +12,7 @@ import {useLocale, useDateFormatter} from "@react-aria/i18n";
 export default function App() {
   let defaultDate = today(getLocalTimeZone());
 
-  const [value, setValue] = React.useState<DateValue>(defaultDate);
+  const [value, setValue] = React.useState<DateValue | null>(defaultDate);
 
   let {locale} = useLocale();
   let formatter = useDateFormatter({dateStyle: "full"});

apps/docs/content/components/date-range-picker/controlled.raw.tsx

@@ -7,7 +7,7 @@ import {parseDate, getLocalTimeZone} from "@internationalized/date";
 import {useDateFormatter} from "@react-aria/i18n";
 
 export default function App() {
-  const [value, setValue] = React.useState<RangeValue<DateValue>>({
+  const [value, setValue] = React.useState<RangeValue<DateValue> | null>({
     start: parseDate("2024-04-01"),
     end: parseDate("2024-04-08"),
   });

apps/docs/content/components/date-range-picker/granularity.raw.tsx

@@ -6,7 +6,7 @@ import {DateRangePicker} from "@nextui-org/react";
 import {parseAbsoluteToLocal} from "@internationalized/date";
 
 export default function App() {
-  let [date, setDate] = React.useState<RangeValue<DateValue>>({
+  let [date, setDate] = React.useState<RangeValue<DateValue> | null>({
     start: parseAbsoluteToLocal("2024-04-01T18:45:22Z"),
     end: parseAbsoluteToLocal("2024-04-08T19:15:22Z"),
   });

apps/docs/content/components/date-range-picker/international-calendar.raw.tsx

@@ -7,7 +7,7 @@ import {parseAbsoluteToLocal} from "@internationalized/date";
 import {I18nProvider} from "@react-aria/i18n";
 
 export default function App() {
-  let [date, setDate] = React.useState<RangeValue<DateValue>>({
+  let [date, setDate] = React.useState<RangeValue<DateValue> | null>({
     start: parseAbsoluteToLocal("2021-04-01T18:45:22Z"),
     end: parseAbsoluteToLocal("2021-04-14T19:15:22Z"),
   });

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/range-calendar/presets.raw.tsx

@@ -19,7 +19,7 @@ export default function App() {
     end: today(getLocalTimeZone()).add({weeks: 1, days: 3}),
   });
 
-  let [focusedValue, setFocusedValue] = React.useState<DateValue>(today(getLocalTimeZone()));
+  let [focusedValue, setFocusedValue] = React.useState<DateValue | null>(today(getLocalTimeZone()));
 
   let {locale} = useLocale();
 

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/custom-styles.raw.jsx

@@ -449,9 +449,9 @@ export default function App() {
                 </Button>
               </DropdownTrigger>
               <DropdownMenu>
-                <DropdownItem>View</DropdownItem>
-                <DropdownItem>Edit</DropdownItem>
-                <DropdownItem>Delete</DropdownItem>
+                <DropdownItem key="view">View</DropdownItem>
+                <DropdownItem key="edit">Edit</DropdownItem>
+                <DropdownItem key="delete">Delete</DropdownItem>
               </DropdownMenu>
             </Dropdown>
           </div>

apps/docs/content/components/table/custom-styles.raw.tsx

@@ -461,9 +461,9 @@ export default function App() {
                 </Button>
               </DropdownTrigger>
               <DropdownMenu>
-                <DropdownItem>View</DropdownItem>
-                <DropdownItem>Edit</DropdownItem>
-                <DropdownItem>Delete</DropdownItem>
+                <DropdownItem key="view">View</DropdownItem>
+                <DropdownItem key="edit">Edit</DropdownItem>
+                <DropdownItem key="delete">Delete</DropdownItem>
               </DropdownMenu>
             </Dropdown>
           </div>

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/components/table/use-case.raw.jsx

@@ -441,9 +441,9 @@ export default function App() {
                 </Button>
               </DropdownTrigger>
               <DropdownMenu>
-                <DropdownItem>View</DropdownItem>
-                <DropdownItem>Edit</DropdownItem>
-                <DropdownItem>Delete</DropdownItem>
+                <DropdownItem key="view">View</DropdownItem>
+                <DropdownItem key="edit">Edit</DropdownItem>
+                <DropdownItem key="delete">Delete</DropdownItem>
               </DropdownMenu>
             </Dropdown>
           </div>

apps/docs/content/components/table/use-case.raw.tsx

@@ -454,9 +454,9 @@ export default function App() {
                 </Button>
               </DropdownTrigger>
               <DropdownMenu>
-                <DropdownItem>View</DropdownItem>
-                <DropdownItem>Edit</DropdownItem>
-                <DropdownItem>Delete</DropdownItem>
+                <DropdownItem key="view">View</DropdownItem>
+                <DropdownItem key="edit">Edit</DropdownItem>
+                <DropdownItem key="delete">Delete</DropdownItem>
               </DropdownMenu>
             </Dropdown>
           </div>

apps/docs/content/components/time-input/controlled.raw.tsx

@@ -6,7 +6,7 @@ import {parseAbsoluteToLocal, Time, ZonedDateTime} from "@internationalized/date
 import {useDateFormatter} from "@react-aria/i18n";
 
 export default function App() {
-  let [value, setValue] = React.useState<TimeInputValue>(
+  let [value, setValue] = React.useState<TimeInputValue | null>(
     parseAbsoluteToLocal("2024-04-08T18:45:22Z"),
   );
 

apps/docs/content/components/time-input/granularity.raw.tsx

@@ -5,7 +5,7 @@ import {TimeInput} from "@nextui-org/react";
 import {parseAbsoluteToLocal} from "@internationalized/date";
 
 export default function App() {
-  let [date, setDate] = React.useState<TimeInputValue>(
+  let [date, setDate] = React.useState<TimeInputValue | null>(
     parseAbsoluteToLocal("2021-04-07T18:45:22Z"),
   );
 

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

@@ -104,9 +104,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.5.5",
-    yarn: "yarn add @internationalized/date@3.5.5",
-    pnpm: "pnpm add @internationalized/date@3.5.5",
+    npm: "npm install @internationalized/date@3.6.0",
+    yarn: "yarn add @internationalized/date@3.6.0",
+    pnpm: "pnpm add @internationalized/date@3.6.0",
   }}
 />
 
@@ -129,9 +129,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.5.5 @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",
   }}
 />
 
@@ -153,9 +153,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.5.5",
-    yarn: "yarn add @internationalized/date@3.5.5",
-    pnpm: "pnpm add @internationalized/date@3.5.5",
+    npm: "npm install @internationalized/date@3.6.0",
+    yarn: "yarn add @internationalized/date@3.6.0",
+    pnpm: "pnpm add @internationalized/date@3.6.0",
   }}
 />
 
@@ -177,9 +177,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.5.5 @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",
   }}
 />
 
@@ -200,9 +200,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.5.5",
-    yarn: "yarn add @internationalized/date@3.5.5",
-    pnpm: "pnpm add @internationalized/date@3.5.5",
+    npm: "npm install @internationalized/date@3.6.0",
+    yarn: "yarn add @internationalized/date@3.6.0",
+    pnpm: "pnpm add @internationalized/date@3.6.0",
   }}
 />
 
@@ -223,9 +223,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.5.5",
-    yarn: "yarn add @internationalized/date@3.5.5",
-    pnpm: "pnpm add @internationalized/date@3.5.5",
+    npm: "npm install @internationalized/date@3.6.0",
+    yarn: "yarn add @internationalized/date@3.6.0",
+    pnpm: "pnpm add @internationalized/date@3.6.0",
   }}
 />
 

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

@@ -119,9 +119,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.5.5",
-    yarn: "yarn add @internationalized/date@3.5.5",
-    pnpm: "pnpm add @internationalized/date@3.5.5",
+    npm: "npm install @internationalized/date@3.6.0",
+    yarn: "yarn add @internationalized/date@3.6.0",
+    pnpm: "pnpm add @internationalized/date@3.6.0",
   }}
 />
 
@@ -144,9 +144,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.5.5 @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",
   }}
 />
 
@@ -168,9 +168,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.5.5",
-    yarn: "yarn add @internationalized/date@3.5.5",
-    pnpm: "pnpm add @internationalized/date@3.5.5",
+    npm: "npm install @internationalized/date@3.6.0",
+    yarn: "yarn add @internationalized/date@3.6.0",
+    pnpm: "pnpm add @internationalized/date@3.6.0",
   }}
 />
 
@@ -192,9 +192,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.5.5 @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.5.5 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.5.5 @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.5.5 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.5.5 @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

@@ -136,9 +136,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.5.5",
-    yarn: "yarn add @internationalized/date@3.5.5",
-    pnpm: "pnpm add @internationalized/date@3.5.5",
+    npm: "npm install @internationalized/date@3.6.0",
+    yarn: "yarn add @internationalized/date@3.6.0",
+    pnpm: "pnpm add @internationalized/date@3.6.0",
   }}
 />
 
@@ -161,9 +161,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.5.5 @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",
   }}
 />
 
@@ -185,9 +185,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.5.5",
-    yarn: "yarn add @internationalized/date@3.5.5",
-    pnpm: "pnpm add @internationalized/date@3.5.5",
+    npm: "npm install @internationalized/date@3.6.0",
+    yarn: "yarn add @internationalized/date@3.6.0",
+    pnpm: "pnpm add @internationalized/date@3.6.0",
   }}
 />
 
@@ -209,9 +209,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.5.5 @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.5.5 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.5.5 @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.5.5 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.5.5 @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.5.5 @react-aria/i18n@3.12.2",
-    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
-    pnpm: "pnpm add @internationalized/date@3.5.5 @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.