ci(changesets): version packages (#6059)

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

.changeset/grumpy-pandas-rescue.md

@@ -1,6 +0,0 @@
----
-"@heroui/input": patch
-"@heroui/number-input": patch
----
-
-add missing logic to handle esc key to clear input / number-input value (#4850)

.eslintignore

@@ -1,25 +0,0 @@
-.now/*
-.next/*
-*.css
-.changeset
-dist
-esm/*
-public/*
-tests/*
-scripts/*
-*.config.js
-.DS_Store
-node_modules
-coverage
-.next
-build
-!.storybook
-/**/.storybook/**
-!.commitlintrc.cjs
-!.lintstagedrc.cjs
-!jest.config.js
-!plopfile.js
-!react-shim.js
-!tsup.config.ts
-apps/docs/preinstall.js
-apps/docs/next-redirect.js

.eslintrc.json

@@ -1,93 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/eslintrc.json",
-  "env": {
-    "browser": false,
-    "es2021": true,
-    "node": true
-  },
-  "extends": [
-    "plugin:react/recommended",
-    "plugin:prettier/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:jsx-a11y/recommended"
-  ],
-  "plugins": ["react", "unused-imports", "import", "@typescript-eslint", "jsx-a11y", "prettier"],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": 12,
-    "sourceType": "module"
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "rules": {
-    "no-console": "warn",
-    "react/prop-types": "off",
-    "react/jsx-uses-react": "off",
-    "react/react-in-jsx-scope": "off",
-    "react-hooks/exhaustive-deps": "off",
-    "jsx-a11y/click-events-have-key-events": "warn",
-    "jsx-a11y/interactive-supports-focus": "warn",
-    "prettier/prettier": "warn",
-    "no-unused-vars": "off",
-    "unused-imports/no-unused-vars": "off",
-    "unused-imports/no-unused-imports": "warn",
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
-      {
-        "args": "after-used",
-        "ignoreRestSiblings": false,
-        "argsIgnorePattern": "^_.*?$"
-      }
-    ],
-    "import/order": [
-      "warn",
-      {
-        "groups": [
-          "type",
-          "builtin",
-          "object",
-          "external",
-          "internal",
-          "parent",
-          "sibling",
-          "index"
-        ],
-        "pathGroups": [
-          {
-            "pattern": "~/**",
-            "group": "external",
-            "position": "after"
-          }
-        ],
-        "newlines-between": "always"
-      }
-    ],
-    "react/self-closing-comp": "warn",
-    "react/jsx-sort-props": [
-      "warn",
-      {
-        "callbacksLast": true,
-        "shorthandFirst": true,
-        "noSortAlphabetically": false,
-        "reservedFirst": true
-      }
-    ],
-    "padding-line-between-statements": [
-      "warn",
-      {"blankLine": "always", "prev": "*", "next": "return"},
-      {"blankLine": "always", "prev": ["const", "let", "var"], "next": "*"},
-      {
-        "blankLine": "any",
-        "prev": ["const", "let", "var"],
-        "next": ["const", "let", "var"]
-      }
-    ],
-    "import/consistent-type-specifier-style": ["error", "prefer-top-level"]
-  }
-}

.github/workflows/QA.yaml

@@ -4,11 +4,12 @@ on:
   pull_request:
     branches:
       - canary
+      - beta/release-next
 
 jobs:
   build:
     name: Build
-    runs-on: ubuntu-latest
+    runs-on: heroui-runner
     steps:
       - name: Checkout branch
         uses: actions/checkout@v4
@@ -21,7 +22,7 @@ jobs:
 
   tests:
     name: Tests
-    runs-on: ubuntu-latest
+    runs-on: heroui-runner
     steps:
       - name: Checkout branch
         uses: actions/checkout@v4
@@ -34,7 +35,7 @@ jobs:
 
   eslint:
     name: ESLint
-    runs-on: ubuntu-latest
+    runs-on: heroui-runner
     steps:
       - name: Checkout branch
         uses: actions/checkout@v4
@@ -47,7 +48,7 @@ jobs:
 
   types:
     name: TypeScript
-    runs-on: ubuntu-latest
+    runs-on: heroui-runner
     steps:
       - name: Checkout branch
         uses: actions/checkout@v4
@@ -60,7 +61,7 @@ jobs:
 
   prettier:
     name: Prettier
-    runs-on: ubuntu-latest
+    runs-on: heroui-runner
     steps:
       - name: Checkout branch
         uses: actions/checkout@v4
@@ -74,7 +75,7 @@ jobs:
   continuous-release:
     name: Continuous Release
     if: github.repository == 'heroui-inc/heroui'
-    runs-on: ubuntu-latest
+    runs-on: heroui-runner
     steps:
       - name: Checkout branch
         uses: actions/checkout@v4

.github/workflows/enter-pre-release-mode.yaml

@@ -4,7 +4,7 @@ on: workflow_dispatch
 jobs:
   enter-pre-release-mode:
     if: ${{ github.ref == 'refs/heads/beta/release-next' || github.ref == 'refs/heads/canary' }}
-    runs-on: ubuntu-latest
+    runs-on: heroui-runner
     permissions:
       contents: write
       pull-requests: write

.github/workflows/exit-pre-release-mode.yaml

@@ -5,7 +5,7 @@ jobs:
   exit-pre-release-mode:
     if: ${{ github.ref == 'refs/heads/beta/release-next' || github.ref == 'refs/heads/canary' }}
     name: exit pre-release mode
-    runs-on: ubuntu-latest
+    runs-on: heroui-runner
     permissions:
       contents: write
       pull-requests: write

.github/workflows/pre-release.yaml

@@ -13,7 +13,7 @@ concurrency: ${{ github.workflow }}-${{ github.ref }}
 jobs:
   prerelease:
     name: changesets pre-release
-    runs-on: ubuntu-latest
+    runs-on: heroui-runner
     timeout-minutes: 30
     permissions:
       contents: write
@@ -28,6 +28,12 @@ jobs:
       - name: Install
         uses: ./.github/common-actions/install
 
+      - name: Check if pre.json exists
+        id: check_if_pre_json_exists
+        uses: andstor/file-existence-action@v3.0.0
+        with:
+          files: ".changeset/pre.json"
+
       - name: Debug condition values
         run: |
           echo "pre.json exists: ${{ steps.check_if_pre_json_exists.outputs.files_exists }}"
@@ -35,12 +41,6 @@ jobs:
           echo "Contains version packages: ${{ contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
           echo "Full condition would be: ${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
 
-      - name: Check if pre.json exists
-        id: check_if_pre_json_exists
-        uses: andstor/file-existence-action@v3.0.0
-        with:
-          files: ".changeset/pre.json"
-
       - name: Get pre-release changesets
         id: get-pre-release-changesets
         uses: notiz-dev/github-action-json-property@release

.github/workflows/release.yaml

@@ -14,7 +14,7 @@ concurrency:
 jobs:
   release:
     name: Release
-    runs-on: ubuntu-latest
+    runs-on: heroui-runner
     timeout-minutes: 30
     steps:
       - name: Checkout branch

.github/workflows/update-stats.yml

@@ -10,7 +10,7 @@ on:
 jobs:
   update-stats:
     name: Update Stats
-    runs-on: ubuntu-latest
+    runs-on: heroui-runner
     steps:
       - name: Checkout branch
         uses: actions/checkout@v4

.lintstagedrc.cjs

@@ -1,4 +1,6 @@
 const {relative} = require("path");
+const escape = require('shell-quote').quote
+const isWin = process.platform === 'win32'
 
 const {ESLint} = require("eslint");
 
@@ -9,18 +11,24 @@ const removeIgnoredFiles = async (files) => {
   const isIgnored = await Promise.all(relativePaths.map((file) => eslint.isPathIgnored(file)));
   const filteredFiles = files.filter((_, i) => !isIgnored[i]);
 
-  return filteredFiles.join(" ");
+  return filteredFiles;
 };
 
 module.exports = {
   "**/*.{js,ts,jsx,tsx}": async (files) => {
     const filesToLint = await removeIgnoredFiles(files);
 
-    return [`eslint -c .eslintrc.json --max-warnings=0 --fix ${filesToLint}`];
+    return filesToLint.map((filename) =>
+      `"${isWin ? filename : escape([filename])}"`
+    ).map((file) => `eslint --max-warnings=0 --fix ${file}`);
   },
   "**/*.css": async (files) => {
     const filesToLint = await removeIgnoredFiles(files);
 
-    return [`prettier --config .prettierrc.json --ignore-path --write ${filesToLint}`];
+    return filesToLint.map((filename) =>
+      `"${isWin ? filename : escape([filename])}"`
+    ).map(
+      (file) => `prettier --config .prettierrc.json --ignore-path --write ${file}`
+    );
   },
 };

.nvmrc

@@ -1 +1 @@
-v20.16.0
+v22.14.0

.vscode/settings.json

@@ -5,10 +5,13 @@
     "source.fixAll.eslint": "explicit"
   },
   "tailwindCSS.experimental.configFile": {
-    "packages/storybook/tailwind.config.js": ["packages/core/theme/**/*", "packages/components/**/*"],
-    "apps/docs/tailwind.config.js": "apps/docs/**/*"
+    "apps/docs/styles/globals.css": "apps/docs/**/*",
+    "packages/storybook/.storybook/style.css": ["packages/core/theme/**/*", "packages/components/**/*"],
   },
   "tailwindCSS.experimental.classRegex": [
     ["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*).*?[\"'`]"]
   ],
+  "cSpell.words": [
+    "heroui"
+  ],
 }

CONTRIBUTING.md

@@ -196,7 +196,7 @@ pnpm build
 npm run build
 ```
 
-> Note: ensure that you have at least Node.js 20.16.0 as well as pnpm 9.6.0 or higher installed on your machine to run the scripts
+> Note: ensure that you have at least Node.js 22 as well as pnpm 10 or higher installed on your machine to run the scripts
 
 6. Send your pull request:
 

apps/docs/.env.example

@@ -21,4 +21,4 @@ NEXT_PUBLIC_FB_FEEDBACK_URL=
 
 # PostHog
 NEXT_PUBLIC_POSTHOG_KEY=your-posthog-key
-NEXT_PUBLIC_POSTHOG_HOST=your-posthog-host
+NEXT_PUBLIC_POSTHOG_HOST=your-posthog-host

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

@@ -1,8 +1,9 @@
 import type {Metadata} from "next";
+import type {Route} from "@/libs/docs/page";
 
 import {notFound} from "next/navigation";
 import {allBlogPosts} from "contentlayer2/generated";
-import {Link, User} from "@heroui/react";
+import {Link, Spacer, User} from "@heroui/react";
 import {format, parseISO} from "date-fns";
 import NextLink from "next/link";
 import {Balancer} from "react-wrap-balancer";
@@ -10,8 +11,8 @@ import {Balancer} from "react-wrap-balancer";
 import {__DEV__, __PREVIEW__} from "@/utils";
 import {MDXContent} from "@/components/mdx-content";
 import {siteConfig} from "@/config/site";
-import {Route} from "@/libs/docs/page";
 import {ChevronRightLinearIcon} from "@/components/icons";
+import {CarbonAd} from "@/components/ads/carbon-ad";
 
 interface BlogPostProps {
   params: {
@@ -100,6 +101,10 @@ export default async function DocPage({params}: BlogPostProps) {
           Back to blog
         </Link>
 
+        <CarbonAd />
+
+        <Spacer y={4} />
+
         <time className="block text-small mb-2 text-default-500" dateTime={post.date}>
           {format(parseISO(post.date), "LLLL d, yyyy")}
         </time>

apps/docs/app/blog/layout.tsx

@@ -9,7 +9,7 @@ interface DocsLayoutProps {
 export default function DocsLayout({children}: DocsLayoutProps) {
   return (
     <>
-      <main className="relative container mx-auto max-w-7xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
+      <main className="relative container mx-auto max-w-7xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 grow">
         {children}
       </main>
       <div

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

@@ -1,26 +1,25 @@
 import type {Metadata} from "next";
+import type {Route} from "@/libs/docs/page";
 
 import {notFound} from "next/navigation";
 import {allDocs} from "contentlayer2/generated";
-import {Link} from "@heroui/react";
+import {Link, ToastProvider} from "@heroui/react";
 
 import {MDXContent} from "@/components/mdx-content";
 import {siteConfig} from "@/config/site";
 import {DocsPager, DocsToc} from "@/components/docs";
-import {Route} from "@/libs/docs/page";
 import {GITHUB_URL, REPO_NAME} from "@/libs/github/constants";
 import {CONTENT_PATH, TAG} from "@/libs/docs/config";
 import {getHeadings} from "@/libs/docs/utils";
 
 interface DocPageProps {
-  params: {
-    slug: string[];
-  };
+  params: Promise<{slug: string[]}>;
 }
 
 async function getDocFromParams({params}: DocPageProps) {
-  const slug = params.slug?.join("/") || "";
-  const doc = allDocs.find((doc) => doc.slugAsParams === slug);
+  const {slug} = await params;
+  const paramsSlug = slug?.join("/") || "";
+  const doc = allDocs.find((doc) => doc.slugAsParams === paramsSlug);
 
   if (!doc) {
     null;
@@ -72,9 +71,11 @@ export async function generateMetadata({params}: DocPageProps): Promise<Metadata
 }
 
 export async function generateStaticParams(): Promise<DocPageProps["params"][]> {
-  return allDocs.map((doc) => ({
-    slug: doc.slugAsParams.split("/"),
-  }));
+  return allDocs.map((doc) =>
+    Promise.resolve({
+      slug: doc.slugAsParams.split("/"),
+    }),
+  );
 }
 
 export default async function DocPage({params}: DocPageProps) {
@@ -104,6 +105,8 @@ export default async function DocPage({params}: DocPageProps) {
           <DocsToc headings={headings} />
         </div>
       )}
+      {/* toast page has its own provider*/}
+      {doc.title !== "Toast" && <ToastProvider />}
     </>
   );
 }

apps/docs/app/docs/layout.tsx

@@ -11,7 +11,7 @@ interface DocsLayoutProps {
 export default function DocsLayout({children}: DocsLayoutProps) {
   return (
     <>
-      <main className="relative container mx-auto max-w-8xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
+      <main className="relative container mx-auto max-w-8xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 grow">
         <div className="grid grid-cols-12">
           <div className="hidden overflow-visible relative z-10 lg:block lg:col-span-2 mt-8 pr-4">
             <DocsSidebar routes={manifest.routes} />

apps/docs/app/examples/autocomplete/async-filtering/page.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 "use client";
 
 import * as React from "react";

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

@@ -1,7 +1,9 @@
 "use client";
 
+import type {MenuTriggerAction} from "@heroui/react";
+
 import * as React from "react";
-import {Autocomplete, AutocompleteItem, MenuTriggerAction} from "@heroui/react";
+import {Autocomplete, AutocompleteItem} from "@heroui/react";
 import {useFilter} from "@react-aria/i18n";
 
 const animals = [

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

@@ -1,5 +1,7 @@
 "use client";
 
+import type {ModalProps} from "@heroui/react";
+
 import {
   Modal,
   ModalContent,
@@ -10,7 +12,6 @@ import {
   useDisclosure,
   RadioGroup,
   Radio,
-  ModalProps,
 } from "@heroui/react";
 import {useState} from "react";
 

apps/docs/app/examples/navbar/layout.tsx

@@ -1,5 +1,5 @@
 const Content = () => (
-  <div className="px-6 flex gap-4 flex-col pb-16 flex-grow">
+  <div className="px-6 flex gap-4 flex-col pb-16 grow">
     <h1 className="mt-4 font-bold text-4xl">Lorem ipsum dolor sit amet</h1>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut

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

@@ -101,7 +101,7 @@ const MyInput = extendVariants(Input, {
         inputWrapper: [
           "bg-zinc-100",
           "border",
-          "shadow",
+          "shadow-sm",
           "transition-colors",
           "focus-within:bg-zinc-100",
           "data-[hover=true]:border-zinc-600",
@@ -138,7 +138,7 @@ const MyInput = extendVariants(Input, {
     },
     radius: {
       xs: {
-        inputWrapper: "rounded",
+        inputWrapper: "rounded-sm",
       },
       sm: {
         inputWrapper: "rounded-[4px]",
@@ -454,7 +454,7 @@ export default function HeroUIPerf() {
           classNames: {
             base: [
               "before:content-[''] before:rounded-t-medium before:fixed before:w-full before:h-14 before:z-10",
-              "before:top-0 before:left-0 before:bg-gradient-to-b before:from-default-50",
+              "before:top-0 before:left-0 before:bg-linear-to-b before:from-default-50",
             ],
           },
         }}
@@ -468,7 +468,7 @@ export default function HeroUIPerf() {
         {(item) => (
           <SelectItem key={item.id} textValue={item.name}>
             <div className="flex gap-2 items-center">
-              <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+              <Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
               <div className="flex flex-col">
                 <span className="text-small">{item.name}</span>
                 <span className="text-tiny text-default-400">{item.email}</span>

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

@@ -1,6 +1,7 @@
-/* eslint-disable jsx-a11y/no-onchange */
 "use client";
 
+import type {Selection, ChipProps, SortDescriptor} from "@heroui/react";
+
 import {
   Table,
   TableHeader,
@@ -14,12 +15,9 @@ import {
   Dropdown,
   DropdownMenu,
   DropdownItem,
-  Selection,
   Chip,
   User,
-  ChipProps,
   Pagination,
-  SortDescriptor,
 } from "@heroui/react";
 import {ChevronDownIcon, SearchIcon} from "@heroui/shared-icons";
 import {useCallback, useMemo, useState} from "react";
@@ -352,20 +350,18 @@ export default function Page() {
         );
       case "actions":
         return (
-          <div className="relative flex justify-end items-center gap-2">
-            <Dropdown className="bg-background border-1 border-default-200">
-              <DropdownTrigger>
-                <Button isIconOnly radius="full" size="sm" variant="light">
-                  <VerticalDotsIcon className="text-default-400" />
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu>
-                <DropdownItem key="view">View</DropdownItem>
-                <DropdownItem key="edit">Edit</DropdownItem>
-                <DropdownItem key="delete">Delete</DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
-          </div>
+          <Dropdown className="bg-background border-1 border-default-200">
+            <DropdownTrigger>
+              <Button isIconOnly radius="full" size="sm" variant="light">
+                <VerticalDotsIcon className="text-default-400" />
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu>
+              <DropdownItem key="view">View</DropdownItem>
+              <DropdownItem key="edit">Edit</DropdownItem>
+              <DropdownItem key="delete">Delete</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
         );
       default:
         return cellValue;
@@ -469,7 +465,7 @@ export default function Page() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-none text-default-400 text-small"
+              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>
@@ -521,13 +517,13 @@ export default function Page() {
       td: [
         // changing the rows border radius
         // first
-        "group-data-[first=true]:first:before:rounded-none",
-        "group-data-[first=true]:last:before:rounded-none",
+        "first:group-data-[first=true]:before:rounded-none",
+        "last:group-data-[first=true]:before:rounded-none",
         // middle
         "group-data-[middle=true]:before:rounded-none",
         // last
-        "group-data-[last=true]:first:before:rounded-none",
-        "group-data-[last=true]:last:before:rounded-none",
+        "first:group-data-[last=true]:before:rounded-none",
+        "last:group-data-[last=true]:before:rounded-none",
       ],
     }),
     [],

apps/docs/app/examples/table/sort-icon/page.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  getKeyValue,
+  Spinner,
+} from "@heroui/react";
+import {SortIcon} from "@heroui/shared-icons";
+import {useAsyncList} from "@react-stately/data";
+import {useState} from "react";
+
+type SWCharacter = {
+  name: string;
+  height: string;
+  mass: string;
+  birth_year: string;
+};
+
+export default function Page() {
+  const [isLoading, setIsLoading] = useState(true);
+
+  let list = useAsyncList<SWCharacter>({
+    async load({signal}) {
+      let res = await fetch(`https://swapi.py4e.com/api/people/?search`, {
+        signal,
+      });
+      let json = await res.json();
+
+      setIsLoading(false);
+
+      return {
+        items: json.results,
+      };
+    },
+    async sort({items, sortDescriptor}) {
+      return {
+        items: items.sort((a, b) => {
+          let first = a[sortDescriptor.column as keyof SWCharacter];
+          let second = b[sortDescriptor.column as keyof SWCharacter];
+          let cmp = (parseInt(first) || first) < (parseInt(second) || second) ? -1 : 1;
+
+          if (sortDescriptor.direction === "descending") {
+            cmp *= -1;
+          }
+
+          return cmp;
+        }),
+      };
+    },
+  });
+
+  return (
+    <div className="p-6">
+      <Table
+        aria-label="Example table with client side sorting"
+        classNames={{
+          table: "min-h-[400px]",
+        }}
+        sortDescriptor={list.sortDescriptor}
+        sortIcon={SortIcon}
+        onSortChange={list.sort}
+      >
+        <TableHeader>
+          <TableColumn key="name" allowsSorting>
+            Name
+          </TableColumn>
+          <TableColumn key="height" allowsSorting>
+            Height
+          </TableColumn>
+          <TableColumn key="mass" allowsSorting>
+            Mass
+          </TableColumn>
+          <TableColumn key="birth_year" allowsSorting>
+            Birth year
+          </TableColumn>
+        </TableHeader>
+        <TableBody
+          isLoading={isLoading}
+          items={list.items}
+          loadingContent={<Spinner label="Loading..." />}
+        >
+          {(item) => (
+            <TableRow key={item.name}>
+              {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

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

@@ -1,6 +1,7 @@
-/* eslint-disable jsx-a11y/no-onchange */
 "use client";
 
+import type {Selection, ChipProps, SortDescriptor} from "@heroui/react";
+
 import {
   Table,
   TableHeader,
@@ -14,12 +15,9 @@ import {
   Dropdown,
   DropdownMenu,
   DropdownItem,
-  Selection,
   Chip,
   User,
-  ChipProps,
   Pagination,
-  SortDescriptor,
 } from "@heroui/react";
 import {ChevronDownIcon, SearchIcon} from "@heroui/shared-icons";
 import {useCallback, useMemo, useState} from "react";
@@ -296,7 +294,7 @@ export default function Page() {
     return filteredUsers;
   }, [users, filterValue, statusFilter]);
 
-  const pages = Math.ceil(filteredItems.length / rowsPerPage);
+  const pages = Math.ceil(filteredItems.length / rowsPerPage) || 1;
 
   const items = useMemo(() => {
     const start = (page - 1) * rowsPerPage;
@@ -344,20 +342,18 @@ export default function Page() {
         );
       case "actions":
         return (
-          <div className="relative flex justify-end items-center gap-2">
-            <Dropdown>
-              <DropdownTrigger>
-                <Button isIconOnly size="sm" variant="light">
-                  <VerticalDotsIcon className="text-default-300" />
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu>
-                <DropdownItem key="view">View</DropdownItem>
-                <DropdownItem key="edit">Edit</DropdownItem>
-                <DropdownItem key="delete">Delete</DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
-          </div>
+          <Dropdown>
+            <DropdownTrigger>
+              <Button isIconOnly size="sm" variant="light">
+                <VerticalDotsIcon className="text-default-300" />
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu>
+              <DropdownItem key="view">View</DropdownItem>
+              <DropdownItem key="edit">Edit</DropdownItem>
+              <DropdownItem key="delete">Delete</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
         );
       default:
         return cellValue;
@@ -461,7 +457,7 @@ export default function Page() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-none text-default-400 text-small"
+              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>

apps/docs/app/layout.tsx

@@ -1,7 +1,8 @@
 import "@/styles/globals.css";
 import "@/styles/sandpack.css";
-import {Metadata, Viewport} from "next";
-import {clsx} from "@heroui/shared-utils";
+import type {Metadata, Viewport} from "next";
+
+import {cn} from "@heroui/theme";
 import {Analytics} from "@vercel/analytics/next";
 
 import {Providers} from "./providers";
@@ -74,8 +75,8 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
     <html suppressHydrationWarning dir="ltr" lang="en">
       <head />
       <body
-        className={clsx(
-          "min-h-screen bg-background font-sans antialiased",
+        className={cn(
+          "min-h-screen text-foreground bg-background font-sans antialiased",
           fonts.sans.variable,
           fonts.mono.variable,
         )}

apps/docs/app/page.tsx

@@ -12,16 +12,14 @@ import {InstallBanner} from "@/components/marketing/install-banner";
 import {Community} from "@/components/marketing/community";
 import Support from "@/components/marketing/support";
 import landingContent from "@/content/landing";
-import {Sponsors} from "@/components/marketing/sponsors";
 import {HeroUIProSection} from "@/components/marketing/heroui-pro-section";
 
 export default async function Home() {
   return (
-    <main className="container mx-auto max-w-7xl px-6 flex-grow">
+    <main className="container mx-auto max-w-7xl px-6 grow">
       <section className="flex flex-col items-center justify-center">
         <Hero />
         <FeaturesGrid features={landingContent.topFeatures} />
-        <Sponsors />
         <CustomThemes />
         <A11yOtb />
         <DarkMode />

apps/docs/app/playground/page.tsx

@@ -5,7 +5,7 @@ import PlaygroundTabs from "./playground-tabs";
 export default function FigmaPage() {
   return (
     <>
-      <main className="prose prose-neutral relative container mx-auto max-w-3xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
+      <main className="prose prose-neutral relative container mx-auto max-w-3xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 grow">
         <section className="w-full flex flex-col items-center mt-12 gap-6">
           <div className="text-center">
             <h1 className="mb-2">Playground</h1>

apps/docs/app/providers.tsx

@@ -1,9 +1,10 @@
 "use client";
 
+import type {ThemeProviderProps} from "next-themes";
+
 import * as React from "react";
-import {HeroUIProvider, ToastProvider} from "@heroui/react";
+import {HeroUIProvider} from "@heroui/react";
 import {ThemeProvider as NextThemesProvider} from "next-themes";
-import {ThemeProviderProps} from "next-themes";
 import {useRouter} from "next/navigation";
 import {useEffect} from "react";
 import posthog from "posthog-js";
@@ -44,7 +45,6 @@ export function Providers({children, themeProps}: ProvidersProps) {
   return (
     <ProviderWrapper>
       <HeroUIProvider navigate={router.push}>
-        <ToastProvider />
         <NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
       </HeroUIProvider>
     </ProviderWrapper>

apps/docs/components/ads/carbon-ad/carbon-ad.tsx

@@ -2,6 +2,7 @@
 
 import React, {useCallback, useEffect} from "react";
 import Script from "next/script";
+import {Image} from "@heroui/react";
 
 import carbonOptimize from "./carbon-optimize";
 
@@ -10,6 +11,13 @@ import {useIsMounted} from "@/hooks/use-is-mounted";
 import {__PROD__, __ENABLE_ADS__} from "@/utils";
 
 const EA_PROVIDER_RATIO = 0.85;
+const PRODUCT_HUNT_ENABLED = false;
+
+const PH_INFO = {
+  description: "Join the conversation and help us get #1 Product of the Week! ↗",
+  title: "We're live on Product Hunt! (30% OFF)",
+  url: "https://ph.heroui.chat?utm_source=heroui.chat&utm_medium=banner",
+};
 
 export const CarbonAd: React.FC<unknown> = () => {
   const carbonRef = React.useRef(null);
@@ -41,6 +49,8 @@ export const CarbonAd: React.FC<unknown> = () => {
   }, []);
 
   useEffect(() => {
+    if (PRODUCT_HUNT_ENABLED) return;
+
     const shouldShowEthicalAds = Math.random() < EA_PROVIDER_RATIO;
 
     let loadCarbon: any = null;
@@ -81,7 +91,7 @@ export const CarbonAd: React.FC<unknown> = () => {
               setShowEthicalAds(true);
             }
           });
-        } catch (error) {
+        } catch {
           loadCarbonAds();
         }
       } else {
@@ -96,6 +106,31 @@ export const CarbonAd: React.FC<unknown> = () => {
     };
   }, [isMounted]);
 
+  if (PRODUCT_HUNT_ENABLED) {
+    return (
+      <div className="px-2 not-prose hover:opacity-80 transition-[opacity] duration-200 carbon-ad-container max-h-[100px] min-h-[100px] h-[100px] m-0 p-0">
+        <a
+          className="group flex items-center flex gap-2 h-full"
+          href={PH_INFO.url}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <Image
+            alt="Product Hunt"
+            className="m-0 w-[80px] h-[80px] object-cover"
+            src="/product-hunt.png"
+          />
+          <div className="flex flex-col gap-0.5 pointer-events-none">
+            <div className="text-small md:text-medium font-medium no-underline">
+              {PH_INFO.title}
+            </div>
+            <div className="text-tiny md:text-small text-default-500">{PH_INFO.description}</div>
+          </div>
+        </a>
+      </div>
+    );
+  }
+
   if (!__PROD__ || !__ENABLE_ADS__) return null;
 
   return (
@@ -110,7 +145,10 @@ export const CarbonAd: React.FC<unknown> = () => {
           style={{display: showEthicalAds ? "block" : "none"}}
         />
       </>
-      <div className="carbon-ad-container" style={{display: showEthicalAds ? "none" : "block"}}>
+      <div
+        className="carbon-ad-container max-h-[120px] p-0"
+        style={{display: showEthicalAds ? "none" : "block"}}
+      >
         <span ref={carbonRef} id="carbon-ad" />
       </div>
     </>

apps/docs/components/ads/carbon-ad/carbon-optimize.js

@@ -47,7 +47,6 @@ export default {
 
     if (!document.hidden) {
       if (typeof _carbonads !== "undefined" && isElementInViewport("#carbonads")) {
-        // eslint-disable-next-line no-undef
         _carbonads.refresh();
       }
     }

apps/docs/components/bg-grid-container.tsx

@@ -1,5 +1,6 @@
-import {ReactNode, FC} from "react";
-import {clsx} from "@heroui/shared-utils";
+import type {ReactNode, FC} from "react";
+
+import {cn} from "@heroui/theme";
 export interface BgGridContainerProps {
   showGradient?: boolean;
   children?: ReactNode;
@@ -13,7 +14,7 @@ export const BgGridContainer: FC<BgGridContainerProps> = ({
 }) => {
   return (
     <div
-      className={clsx(
+      className={cn(
         "relative overflow-y-hidden flex items-center border border-default-200 dark:border-default-100 px-2 py-4 rounded-lg",
         "overflow-hidden",
         // blur effect
@@ -34,7 +35,7 @@ export const BgGridContainer: FC<BgGridContainerProps> = ({
         {children}
       </div>
       {/* <div
-        className={clsx(
+        className={cn(
           "hidden md:block absolute z-[-1] inset-0 bg-grid-zinc-300/25 [mask-image:linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.6))]",
           "dark:bg-grid-zinc-500/25 dark:[mask-image:linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.5))]",
         )}

apps/docs/components/blog-post.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import {BlogPost} from "contentlayer2/generated";
+import type {BlogPost} from "contentlayer2/generated";
+
 import {Card, CardFooter, CardBody, CardHeader, Link, Avatar, Image} from "@heroui/react";
 import Balancer from "react-wrap-balancer";
 import {format, parseISO} from "date-fns";

apps/docs/components/blog/video-in-view.tsx

@@ -1,8 +1,9 @@
-/* eslint-disable jsx-a11y/media-has-caption */
 "use client";
 
+import type {FC} from "react";
+
 import {useInView} from "framer-motion";
-import {useRef, FC, useEffect, useState, useCallback} from "react";
+import {useRef, useEffect, useState, useCallback} from "react";
 import {Button, cn, Spinner, Tooltip} from "@heroui/react";
 
 import {PlayBoldIcon, PauseBoldIcon} from "@/components/icons";

apps/docs/components/cmdk.tsx

@@ -1,15 +1,18 @@
 /* eslint-disable jsx-a11y/no-autofocus */
 "use client";
 
+import type {FC} from "react";
+import type {ButtonProps} from "@heroui/react";
+
 import {Command} from "cmdk";
-import {useEffect, useState, FC, useMemo, useCallback, useRef} from "react";
+import {useEffect, useState, useMemo, useCallback, useRef} from "react";
 import {matchSorter} from "match-sorter";
-import {Button, ButtonProps, Kbd, Modal, ModalContent} from "@heroui/react";
+import {Button, Kbd, Modal, ModalContent} from "@heroui/react";
 import {CloseIcon} from "@heroui/shared-icons";
 import {tv} from "tailwind-variants";
 import {usePathname, useRouter} from "next/navigation";
 import MultiRef from "react-multi-ref";
-import {clsx} from "@heroui/shared-utils";
+import {cn} from "@heroui/theme";
 import scrollIntoView from "scroll-into-view-if-needed";
 import {isAppleDevice, isWebKit} from "@react-aria/utils";
 import {create} from "zustand";
@@ -60,7 +63,7 @@ const cmdk = tv({
       "h-14",
       "font-sans",
       "text-lg",
-      "outline-none",
+      "outline-solid outline-transparent",
       "rounded-none",
       "bg-transparent",
       "text-default-700",
@@ -78,7 +81,7 @@ const cmdk = tv({
       "justify-between",
       "items-center",
       "rounded-lg",
-      "shadow",
+      "shadow-xs",
       "bg-content2/50",
       "active:opacity-70",
       "cursor-pointer",
@@ -210,7 +213,7 @@ export const Cmdk: FC<{}> = () => {
     [query],
   );
 
-  const items = !isEmpty(results) ? results : recentSearches ?? [];
+  const items = !isEmpty(results) ? results : (recentSearches ?? []);
 
   // Toggle the menu when ⌘K / CTRL K is pressed
   useEffect(() => {
@@ -320,7 +323,7 @@ export const Cmdk: FC<{}> = () => {
       return (
         <Button
           isIconOnly
-          className={clsx(
+          className={cn(
             "border data-[hover=true]:bg-content2 border-default-400 dark:border-default-100",
             className,
           )}
@@ -394,10 +397,10 @@ export const Cmdk: FC<{}> = () => {
           "mt-[20vh]",
           "border-small",
           "dark:border-default-100",
-          "supports-[backdrop-filter]:bg-background/80",
-          "dark:supports-[backdrop-filter]:bg-background/30",
-          "supports-[backdrop-filter]:backdrop-blur-md",
-          "supports-[backdrop-filter]:backdrop-saturate-150",
+          "supports-backdrop-filter:bg-background/80",
+          "dark:supports-backdrop-filter:bg-background/30",
+          "supports-backdrop-filter:backdrop-blur-md",
+          "supports-backdrop-filter:backdrop-saturate-150",
         ],
         backdrop: ["bg-black/80"],
       }}

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

@@ -8,7 +8,7 @@ import css from "refractor/lang/css";
 import diff from "refractor/lang/diff";
 import {toHtml} from "hast-util-to-html";
 import rangeParser from "parse-numeric-range";
-import {clsx} from "@heroui/shared-utils";
+import {cn} from "@heroui/theme";
 
 import {Pre} from "./pre";
 import {WindowActions} from "./window-actions";
@@ -141,7 +141,7 @@ const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>((_props, forw
 
   // TODO reset theme
   const classes = `language-${language}`;
-  const codeClasses = clsx("absolute w-full px-4 pb-6", showWindowIcons ? "top-10" : "top-0");
+  const codeClasses = cn("absolute w-full px-4 pb-6", showWindowIcons ? "top-10" : "top-0");
 
   if (mode === "typewriter") {
     return <CodeTypewriter className={classes} css={css} value={result} {...props} />;
@@ -150,12 +150,12 @@ const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>((_props, forw
   return (
     <Pre
       ref={forwardedRef}
-      className={clsx("code-block", classes, className)}
+      className={cn("code-block", classes, className)}
       data-line-numbers={showLineNumbers}
       {...props}
     >
       {showWindowIcons && <WindowActions title={title} />}
-      <code dangerouslySetInnerHTML={{__html: result}} className={clsx(classes, codeClasses)} />
+      <code dangerouslySetInnerHTML={{__html: result}} className={cn(classes, codeClasses)} />
     </Pre>
   );
 });

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

@@ -1,9 +1,11 @@
 "use client";
 // Inspired by https://github.dev/modulz/stitches-site code demo
+import type {CodeBlockProps} from "./code-block";
+
 import React from "react";
 import rangeParser from "parse-numeric-range";
 
-import CodeBlock, {CodeBlockProps} from "./code-block";
+import CodeBlock from "./code-block";
 
 import {CopyButton} from "@/components";
 

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

@@ -1,5 +1,5 @@
 import {forwardRef} from "react";
-import {clsx} from "@heroui/shared-utils";
+import {cn} from "@heroui/theme";
 
 export interface PreProps {
   className?: string;
@@ -14,7 +14,7 @@ export const Pre = forwardRef<HTMLPreElement, PreProps>(
     return (
       <pre
         ref={forwardedRef}
-        className={clsx(
+        className={cn(
           "relative w-full h-full box-border shadow-md text-white/80 leading-5 whitespace-pre text-sm font-mono bg-code-background rounded-xl [&>code]:transition-transform",
           scrollClass,
           className,

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

@@ -1,6 +1,6 @@
 import React from "react";
 import {tv} from "tailwind-variants";
-import {clsx} from "@heroui/shared-utils";
+import {cn} from "@heroui/theme";
 
 export type WindowActionsProps = {
   title?: string;
@@ -21,7 +21,7 @@ const windowIconStyles = tv({
 export const WindowActions: React.FC<WindowActionsProps> = ({title, className, ...props}) => {
   return (
     <div
-      className={clsx(
+      className={cn(
         "flex items-center sticky top-0 left-0 px-4 z-10 justify-between h-8 bg-code-background w-full",
         className,
       )}

apps/docs/components/copy-button.tsx

@@ -1,6 +1,8 @@
-import {ButtonProps} from "@heroui/react";
+import type {ButtonProps} from "@heroui/react";
+
 import {useClipboard} from "@heroui/use-clipboard";
 import {memo} from "react";
+import {Tooltip} from "@heroui/react";
 
 import {PreviewButton} from "./preview-button";
 
@@ -31,7 +33,17 @@ export const CopyButton = memo<CopyButtonProps>(({value, className, ...buttonPro
     copy(value);
   };
 
-  return <PreviewButton className={className} icon={icon} onPress={handleCopy} {...buttonProps} />;
+  return (
+    <Tooltip
+      key={copied ? "copied" : "copy"}
+      className="text-xs px-2"
+      closeDelay={0}
+      content={copied ? "Copied!" : "Copy"}
+      radius="md"
+    >
+      <PreviewButton className={className} icon={icon} onPress={handleCopy} {...buttonProps} />
+    </Tooltip>
+  );
 });
 
 CopyButton.displayName = "CopyButton";

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

@@ -1,6 +1,8 @@
 "use client";
 
-import {FC, useState} from "react";
+import type {FC} from "react";
+
+import {useState} from "react";
 import {
   Modal,
   Button,
@@ -35,8 +37,8 @@ export const DemoCodeModal: FC<DemoCodeModalProps> = ({isOpen, code, title, subt
   return (
     <Modal
       classNames={{
-        backdrop: "z-[100002]", // to appear above the navbar
-        wrapper: "z-[100003]", // to appear above the backdrop
+        backdrop: "z-100002", // to appear above the navbar
+        wrapper: "z-100003", // to appear above the backdrop
       }}
       isOpen={isOpen}
       motionProps={{
@@ -69,7 +71,7 @@ export const DemoCodeModal: FC<DemoCodeModalProps> = ({isOpen, code, title, subt
             <CodeWindow
               showCopy
               showWindowIcons
-              className="min-h-[320px] !h-[60vh] max-h-full"
+              className="min-h-[320px] h-[60vh]! max-h-full"
               language="jsx"
               title={fileName}
               value={code}

apps/docs/components/demos/custom-button.tsx

@@ -39,7 +39,7 @@ export const CustomButton = () => {
     <Button
       ref={buttonRef}
       disableRipple
-      className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-xl bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:!duration-500 hover:after:scale-150 hover:after:opacity-0"
+      className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-xl bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:duration-500! hover:after:scale-150 hover:after:opacity-0"
       size="lg"
       onPress={handleConfetti}
     >

apps/docs/components/demos/music-player.tsx

@@ -1,8 +1,11 @@
 "use client";
 
-import {Card, CardBody, Button, Image, Slider, CardProps} from "@heroui/react";
-import {useState, FC} from "react";
-import {clsx} from "@heroui/shared-utils";
+import type {CardProps} from "@heroui/react";
+import type {FC} from "react";
+
+import {Card, CardBody, Button, Image, Slider} from "@heroui/react";
+import {useState} from "react";
+import {cn} from "@heroui/theme";
 import NextImage from "next/image";
 
 import {
@@ -22,7 +25,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
   return (
     <Card
       isBlurred
-      className={clsx("border-none bg-background/60 dark:bg-default-100/50", className)}
+      className={cn("border-none bg-background/60 dark:bg-default-100/50", className)}
       shadow="sm"
       {...otherProps}
     >
@@ -49,7 +52,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Like"
-                className="text-default-900/60 data-[hover]:bg-foreground/10 -translate-y-2 translate-x-2"
+                className="text-default-900/60 data-hover:bg-foreground/10 -translate-y-2 translate-x-2"
                 radius="full"
                 variant="light"
                 onPress={() => setLiked((v) => !v)}
@@ -82,7 +85,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Repeat"
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -91,7 +94,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Previous"
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -100,7 +103,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Play"
-                className="w-auto h-auto data-[hover]:bg-foreground/10"
+                className="w-auto h-auto data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -109,7 +112,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Next"
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >
@@ -118,7 +121,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
               <Button
                 isIconOnly
                 aria-label="Shuffle"
-                className="data-[hover]:bg-foreground/10"
+                className="data-hover:bg-foreground/10"
                 radius="full"
                 variant="light"
               >

apps/docs/components/demos/speed-progress.tsx

@@ -1,11 +1,7 @@
-import {
-  tv,
-  VariantProps,
-  CircularProgress,
-  CircularProgressProps,
-  circularProgress,
-} from "@heroui/react";
-import {FC} from "react";
+import type {VariantProps, CircularProgressProps} from "@heroui/react";
+import type {FC} from "react";
+
+import {tv, CircularProgress, circularProgress} from "@heroui/react";
 
 const speedProgress = tv({
   extend: circularProgress,

apps/docs/components/demos/user-twitter-card.tsx

@@ -2,7 +2,7 @@
 
 import {useState} from "react";
 import {Card, CardHeader, Button, Avatar, CardBody, CardFooter} from "@heroui/react";
-import {clsx} from "@heroui/shared-utils";
+import {cn} from "@heroui/theme";
 
 interface UserTwitterCardProps {
   className?: string;
@@ -12,7 +12,7 @@ export const UserTwitterCard = ({className}: UserTwitterCardProps) => {
   const [isFollowed, setIsFollowed] = useState(false);
 
   return (
-    <Card className={clsx("max-w-[300px]", className)}>
+    <Card className={cn("max-w-[300px]", className)}>
       <CardHeader className="justify-between">
         <div className="flex gap-5">
           <Avatar

apps/docs/components/docs/components/blockquote.tsx

@@ -1,7 +1,9 @@
 "use client";
 
-import {FC} from "react";
-import {tv, VariantProps} from "tailwind-variants";
+import type {FC} from "react";
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
 
 const blockquoteStyles = tv({
   base: "border px-4 bg-default-50 my-6 py-3 rounded-xl [&>p]:m-0",

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

@@ -1,27 +1,29 @@
 "use client";
 
+import type {UseCodeDemoProps} from "./use-code-demo";
+import type {WindowResizerProps} from "./window-resizer";
+import type {GradientBoxProps} from "@/components/gradient-box";
+
 import React, {useCallback, useMemo, useRef} from "react";
 import dynamic from "next/dynamic";
 import {Skeleton, Tab, Tabs} from "@heroui/react";
 import {useInView} from "framer-motion";
 
-import {useCodeDemo, UseCodeDemoProps} from "./use-code-demo";
-import WindowResizer, {WindowResizerProps} from "./window-resizer";
-
-import {GradientBoxProps} from "@/components/gradient-box";
+import {useCodeDemo} from "./use-code-demo";
+import WindowResizer from "./window-resizer";
 
 const DynamicReactLiveDemo = dynamic(
   () => import("./react-live-demo").then((m) => m.ReactLiveDemo),
   {
     ssr: false,
-    // eslint-disable-next-line react/display-name
+
     loading: () => <Skeleton className="w-full h-24 rounded-xl" />,
   },
 );
 
 const DynamicSandpack = dynamic(() => import("../../../sandpack").then((m) => m.Sandpack), {
   ssr: false,
-  // eslint-disable-next-line react/display-name
+
   loading: () => <Skeleton className="w-full h-32 rounded-xl" />,
 });
 
@@ -167,23 +169,25 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
   }, [showTabs, showPreview, showEditor]);
 
   return (
-    <div ref={ref} className="flex flex-col gap-2">
+    <div ref={ref} className="flex flex-col gap-2 relative">
       {shouldRenderTabs ? (
-        <Tabs
-          disableAnimation
-          aria-label="Code demo tabs"
-          classNames={{
-            panel: "pt-0",
-          }}
-          variant="underlined"
-        >
-          <Tab key="preview" title="Preview">
-            {previewContent}
-          </Tab>
-          <Tab key="code" title="Code">
-            {editorContent}
-          </Tab>
-        </Tabs>
+        <>
+          <Tabs
+            disableAnimation
+            aria-label="Code demo tabs"
+            classNames={{
+              panel: "pt-0",
+            }}
+            variant="underlined"
+          >
+            <Tab key="preview" title="Preview">
+              {previewContent}
+            </Tab>
+            <Tab key="code" title="Code">
+              {editorContent}
+            </Tab>
+          </Tabs>
+        </>
       ) : (
         <>
           {previewContent}

apps/docs/components/docs/components/code-demo/parse-dependencies.ts

@@ -0,0 +1,57 @@
+import React from "react";
+import * as HeroUI from "@heroui/react";
+
+const importRegex = /^(import\s+(?!type\s+\{)[\s\S]*?;)/gm;
+
+export const parseDependencies = (content: string) => {
+  const dependencies: {name: string; version: string}[] = [];
+
+  // by default, react and heroui packages are installed already
+  const installedPackages = {
+    ...React,
+    ...HeroUI,
+  } as Record<string, unknown>;
+
+  // create a map of installed packages
+  const imports = Object.keys(installedPackages).reduce(
+    (acc, key) => {
+      acc[key] = `${key}`;
+
+      return acc;
+    },
+    {React: "React"} as Record<string, string>,
+  );
+
+  // match all imports from the file content
+  content.match(importRegex)?.forEach((match) => {
+    // check if imported component is in default installed packages
+    const componentName = match.match(/\w+/g)?.[1] || "";
+    const matchingImport = imports[componentName];
+
+    if (matchingImport) {
+      return "";
+    }
+
+    if (match.includes("./") || match.includes("../")) {
+      return "";
+    }
+
+    const packageName = match.match(/['"]([^'"]+)['"]/)?.[1];
+
+    if (!packageName) {
+      return;
+    }
+
+    dependencies.push({
+      name: packageName,
+      version: fixedVersions[packageName] || "latest",
+    });
+  });
+
+  return dependencies;
+};
+
+const fixedVersions = {
+  "@internationalized/date": "3.10.1",
+  "@react-aria/i18n": "3.12.14",
+};

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

@@ -1,14 +1,16 @@
+import type {SandpackFiles} from "@codesandbox/sandpack-react/types";
+import type {GradientBoxProps} from "@/components/gradient-box";
+
 import React from "react";
 import {LivePreview, LiveProvider, LiveError} from "react-live";
-import {clsx} from "@heroui/shared-utils";
+import {cn} from "@heroui/theme";
 import * as HeroUI from "@heroui/react";
 import * as intlDateUtils from "@internationalized/date";
 import * as reactAriaI18n from "@react-aria/i18n";
 import * as reactHookFormBase from "react-hook-form";
-import {SandpackFiles} from "@codesandbox/sandpack-react/types";
 
 import {BgGridContainer} from "@/components/bg-grid-container";
-import {GradientBox, GradientBoxProps} from "@/components/gradient-box";
+import {GradientBox} from "@/components/gradient-box";
 import {CopyButton} from "@/components/copy-button";
 import {StackblitzButton} from "@/components/stackblitz-button";
 import {PreviewButton} from "@/components/preview-button";
@@ -71,7 +73,7 @@ export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
         </div>
       )}
       <LivePreview
-        className={clsx("live-preview flex h-full w-full not-prose ", {
+        className={cn("live-preview flex h-full w-full not-prose ", {
           "justify-center items-center": isCentered,
         })}
         style={{height}}
@@ -85,7 +87,7 @@ export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
       {isGradientBox ? (
         <GradientBox
           isCentered
-          className={clsx(
+          className={cn(
             className,
             "relative overflow-y-hidden flex items-center border border-default-200 dark:border-default-100 px-2 py-4 rounded-lg overflow-hidden",
           )}
@@ -97,7 +99,7 @@ export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
           </div>
         </GradientBox>
       ) : (
-        <BgGridContainer className={clsx(className, "group/code-demo")}>{content}</BgGridContainer>
+        <BgGridContainer className={cn(className, "group/code-demo")}>{content}</BgGridContainer>
       )}
     </LiveProvider>
   );

apps/docs/components/docs/components/code-demo/use-code-demo.ts

@@ -1,9 +1,9 @@
-import {FileCode} from "./types";
+import type {FileCode} from "./types";
+import type {SandpackProps} from "@/components/sandpack";
+
 import {scope} from "./react-live-demo";
 import {transformCode, joinCode, getFileName} from "./utils";
 
-import {SandpackProps} from "@/components/sandpack";
-
 export interface UseCodeDemoProps extends SandpackProps {
   code?: string;
 }

apps/docs/components/docs/components/code-demo/utils.ts

@@ -1,4 +1,4 @@
-import {FileCode} from "./types";
+import type {FileCode} from "./types";
 
 const importRegex = /^(import\s+(?!type\s+\{)[\s\S]*?;)/gm;
 
@@ -55,3 +55,20 @@ export const joinCode = (filesCode: FileCode[]) => {
 export const getFileName = (filePath: string) => {
   return filePath?.split(".")?.[0]?.replace(/\W/g, "");
 };
+
+export const toPascalCase = (str: string) => {
+  const cleanStr = str.replace(/[^a-zA-Z0-9\s]/g, "");
+
+  return cleanStr
+    .split(/\s+/)
+    .map((word) => {
+      return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+    })
+    .join("");
+};
+
+export const toKebabCase = (str: string) => {
+  const cleanStr = str.replace(/[^a-zA-Z0-9\s]/g, "");
+
+  return cleanStr.toLowerCase().split(/\s+/).join("-");
+};

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

@@ -4,7 +4,7 @@ import type {Language, PrismTheme} from "prism-react-renderer";
 
 import {useIntersectionObserver} from "usehooks-ts";
 import React, {forwardRef, useEffect} from "react";
-import {clsx, dataAttr, getUniqueID} from "@heroui/shared-utils";
+import {dataAttr, getUniqueID} from "@heroui/shared-utils";
 import BaseHighlight, {defaultProps} from "prism-react-renderer";
 import {debounce, omit} from "@heroui/shared-utils";
 import {cn} from "@heroui/react";
@@ -102,7 +102,7 @@ const CodeBlockHighlight = ({
         // 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",
+        width: "w-full",
       }}
     >
       {isVisible ? (
@@ -124,16 +124,10 @@ const CodeBlockHighlight = ({
                   preRef.current = element;
                 }
               }}
-              className={clsx(
-                className,
-                classNameProp,
-                `language-${codeLang}`,
-                "max-w-full contents",
-                {
-                  "flex-col": isMultiLine,
-                  "overflow-x-scroll scrollbar-hide": hideScrollBar,
-                },
-              )}
+              className={cn(className, classNameProp, `language-${codeLang}`, "max-w-full", {
+                "flex-col": isMultiLine,
+                "overflow-x-scroll scrollbar-hide": hideScrollBar,
+              })}
               data-language={language}
               style={style}
             >
@@ -144,7 +138,7 @@ const CodeBlockHighlight = ({
                   <div
                     {...omit(lineProps, ["key"])}
                     key={`${i}-${getUniqueID("line-wrapper")}`}
-                    className={clsx(
+                    className={cn(
                       lineProps.className,
                       removeIndent ? "pr-4" : "px-4",
                       "relative [&>span]:relative [&>span]:z-10",
@@ -152,7 +146,7 @@ const CodeBlockHighlight = ({
                         "px-2": showLines,
                       },
                       {
-                        "before:to-code-background before:absolute before:left-0 before:z-0 before:h-full before:w-full before:bg-gradient-to-r before:from-white/10 before:content-[''] before:pointer-events-none":
+                        "before:to-code-background before:absolute before:left-0 before:z-0 before:h-full before:w-full before:bg-linear-to-r before:from-white/10 before:content-[''] before:pointer-events-none":
                           shouldHighlightLine(i),
                       },
                     )}
@@ -202,7 +196,7 @@ const CodeBlockHighlight = ({
           )}
         </BaseHighlight>
       ) : (
-        <div className={clsx(classNameProp, "w-full bg-code-background rounded-lg")} />
+        <div className={cn(classNameProp, "w-full bg-code-background rounded-lg")} />
       )}
     </div>
   );

apps/docs/components/docs/components/component-links.tsx

@@ -1,5 +1,7 @@
-import {Button, ButtonProps, Code, Link, Tooltip} from "@heroui/react";
-import {ReactNode} from "react";
+import type {ButtonProps} from "@heroui/react";
+import type {ReactNode} from "react";
+
+import {Button, Code, Link, Tooltip} from "@heroui/react";
 import Balancer from "react-wrap-balancer";
 import {usePostHog} from "posthog-js/react";
 
@@ -42,7 +44,7 @@ const ButtonLink = ({
     <Button
       isExternal
       as={Link}
-      className="!text-small py-4 bg-default-100 dark:bg-default-50 text-default-700"
+      className="text-small! py-4 bg-default-100 dark:bg-default-50 text-default-700"
       href={href}
       size="sm"
       startContent={startContent}

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

@@ -1,7 +1,9 @@
 "use client";
 
+import type {Key} from "react";
+
 import {Tabs, Tab, Snippet, Code} from "@heroui/react";
-import {Key, useState} from "react";
+import {useState} from "react";
 
 import Codeblock from "./codeblock";
 import {Blockquote} from "./blockquote";
@@ -22,6 +24,10 @@ const packageManagers: PackageManager[] = [
     label: "CLI",
     icon: <CLIBoldIcon className="text-lg text-default-600 dark:text-default-400" />,
   },
+  {
+    name: "pnpm",
+    icon: <PnpmIcon className="text-[#F69220]" />,
+  },
   {
     name: "npm",
     icon: <NpmSmallIcon className="text-[#E53E3E]" />,
@@ -30,10 +36,6 @@ const packageManagers: PackageManager[] = [
     name: "yarn",
     icon: <YarnIcon className="text-[#2C8EBB]" />,
   },
-  {
-    name: "pnpm",
-    icon: <PnpmIcon className="text-[#F69220]" />,
-  },
   {
     name: "bun",
     icon: <BunIcon className="text-lg text-[#FBF0DF]" />,

apps/docs/components/docs/deprecation-message.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import {Blockquote} from "./components/blockquote";
+
+export const DeprecationMessage = () => {
+  return (
+    <Blockquote color="warning">
+      ⚠️ <b>Deprecation Notice:</b> HeroUI v2 will be deprecated soon. We recommend to use{" "}
+      <a
+        className="underline"
+        href="http://v3.heroui.com/"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <b>HeroUI v3</b>
+      </a>{" "}
+      for the new projects.
+    </Blockquote>
+  );
+};

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

@@ -18,7 +18,7 @@ export const HeroUIProCallout = () => {
       <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]">
+          <span className="bg-clip-text text-transparent bg-linear-to-b from-[#5EA2EF] to-[#0072F5]">
             faster
           </span>
           <br />
@@ -37,7 +37,7 @@ export const HeroUIProCallout = () => {
         </div>
       </div>
       <NextLink
-        className="absolute inset-0 z-[1]"
+        className="absolute inset-0 z-1"
         href="https://heroui.pro/components?utm_source=heroui.com&utm_medium=callout"
         onClick={handleClick}
       />

apps/docs/components/docs/index.ts

@@ -2,3 +2,4 @@ export * from "./sidebar";
 export * from "./toc";
 export * from "./pager";
 export * from "./components/code-demo";
+export * from "./deprecation-message";

apps/docs/components/docs/pager.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import type {Route} from "@/libs/docs/page";
+
 import * as React from "react";
 import {Link} from "@heroui/react";
 import {usePostHog} from "posthog-js/react";
@@ -8,7 +10,6 @@ import {ChevronIcon} from "@heroui/shared-icons";
 
 import manifest from "@/config/routes.json";
 import {removeFromLast} from "@/utils";
-import {Route} from "@/libs/docs/page";
 import {useDocsRoute} from "@/hooks/use-docs-route";
 
 export interface FooterNavProps {

apps/docs/components/docs/ph-callout.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import NextLink from "next/link";
+
+const PH_INFO = {
+  description: "Join the conversation and help us get #1 Product of the Week! ↗",
+  title: "Live on Product Hunt!",
+  url: "https://ph.heroui.chat?utm_source=heroui.chat&utm_medium=callout",
+};
+
+export const PHCallout = () => {
+  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-medium font-semibold">
+          {PH_INFO.title}
+        </p>
+        <p className="text-center text-xs mt-2 px-3 font-medium text-default-500 dark:text-default-400 leading-tight">
+          {PH_INFO.description}
+        </p>
+      </div>
+      <div className="mt-3 w-full max-w-[130px] 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%,#EC733A_0%,#F54180_50%,#EC733A_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">
+          Get 30% off
+        </div>
+      </div>
+      <NextLink
+        className="absolute inset-0 z-[1]"
+        href={PH_INFO.url}
+        rel="noopener noreferrer"
+        target="_blank"
+      />
+    </div>
+  );
+};

apps/docs/components/docs/sidebar.tsx

@@ -1,22 +1,27 @@
 "use client";
 
-import {FC, useEffect, useState, useRef, useMemo, useLayoutEffect} from "react";
+import type {FC} from "react";
+import type {
+  CollectionBase,
+  Expandable,
+  MultipleSelection,
+  Node,
+  ItemProps,
+} from "@react-types/shared";
+import type {TreeState} from "@react-stately/tree";
+import type {SpacerProps} from "@heroui/react";
+import type {Route} from "@/libs/docs/page";
+
+import {useEffect, useState, useRef, useMemo, useLayoutEffect} from "react";
 import {usePostHog} from "posthog-js/react";
 import {ChevronIcon} from "@heroui/shared-icons";
-import {CollectionBase, Expandable, MultipleSelection, Node, ItemProps} from "@react-types/shared";
 import {BaseItem} from "@heroui/aria-utils";
 import {useFocusRing} from "@react-aria/focus";
-import {TreeState, useTreeState} from "@react-stately/tree";
+import {useTreeState} from "@react-stately/tree";
 import {useSelectableCollection} from "@react-aria/selection";
 import {usePress} from "@react-aria/interactions";
-import {clsx, dataAttr, debounce, isEmpty} from "@heroui/shared-utils";
-import {
-  SpacerProps,
-  Spacer,
-  Link as HeroUILink,
-  Chip,
-  dataFocusVisibleClasses,
-} from "@heroui/react";
+import {dataAttr, debounce, isEmpty} from "@heroui/shared-utils";
+import {Spacer, Link as HeroUILink, Chip, dataFocusVisibleClasses, cn} from "@heroui/react";
 import Link from "next/link";
 import {usePathname, useRouter} from "next/navigation";
 
@@ -24,7 +29,6 @@ import {ScrollArea} from "../scroll-area";
 
 import {getRoutePaths} from "./utils";
 
-import {Route} from "@/libs/docs/page";
 import {TreeKeyboardDelegate} from "@/utils/tree-keyboard-delegate";
 import emitter from "@/libs/emitter";
 
@@ -85,7 +89,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
 
   const Component = hasChildNodes ? "ul" : "li";
 
-  const cn = clsx(
+  const classNames = cn(
     "w-full",
     "font-normal",
     "before:mr-4",
@@ -121,7 +125,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
         <span className="flex items-center gap-3">
           <span className="font-medium sm:text-sm">{rendered}</span>
           <ChevronIcon
-            className={clsx("transition-transform", {
+            className={cn("transition-transform", {
               "-rotate-90": isExpanded,
             })}
           />
@@ -132,14 +136,14 @@ function TreeItem<T>(props: TreeItemProps<T>) {
     return (
       <HeroUILink
         as={item.props?.comingSoon ? "div" : Link}
-        className={clsx(cn, {
+        className={cn(classNames, {
           "pointer-events-none": item.props?.comingSoon,
         })}
         color="foreground"
         href={item.props?.comingSoon ? "#" : paths.pathname}
       >
         <span
-          className={clsx(
+          className={cn(
             "sm:text-sm",
             isSelected
               ? "text-primary font-medium dark:text-foreground"
@@ -191,8 +195,8 @@ function TreeItem<T>(props: TreeItemProps<T>) {
       ref={ref}
       aria-expanded={dataAttr(hasChildNodes ? isExpanded : undefined)}
       aria-selected={dataAttr(isSelected)}
-      className={clsx(
-        "flex flex-col outline-none w-full tap-highlight-transparent",
+      className={cn(
+        "flex flex-col outline-solid outline-transparent w-full tap-highlight-transparent",
         hasChildNodes ? "mb-4" : "first:mt-4",
         // focus ring
         ...dataFocusVisibleClasses,
@@ -202,7 +206,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
       role="treeitem"
     >
       <div
-        className={clsx("flex items-center gap-3 cursor-pointer", {
+        className={cn("flex items-center gap-3 cursor-pointer", {
           "pointer-events-none": item.props?.comingSoon,
         })}
         {...(item.props?.comingSoon ? {} : pressProps)}
@@ -280,7 +284,7 @@ function Tree<T extends object>(props: CollectionBase<T> & Expandable & Multiple
   return (
     <ScrollArea
       ref={ref}
-      className="h-full max-w-[90%] lg:max-h-[calc(100vh_-_64px)]"
+      className="h-full max-w-full lg:max-h-[calc(100vh_-_64px)]"
       role="tree"
       {...collectionProps}
       scrollViewPortRef={scrollViewPortRef}
@@ -345,7 +349,7 @@ export const DocsSidebar: FC<DocsSidebarProps> = ({routes, slug, tag, className}
 
   return (
     <div
-      className={clsx(
+      className={cn(
         "lg:fixed mt-2 z-0 lg:h-[calc(100vh-121px)]",
         isProBannerVisible ? "lg:top-32" : "lg:top-20",
         className,

apps/docs/components/docs/toc.tsx

@@ -1,14 +1,16 @@
 "use client";
 
-import {FC, useRef, useEffect, useState} from "react";
-import {clsx} from "@heroui/shared-utils";
+import type {FC} from "react";
+import type {Heading} from "@/libs/docs/utils";
+
+import {useRef, useEffect, useState} from "react";
+import {cn} from "@heroui/theme";
 import {Divider, Spacer} from "@heroui/react";
 import {ChevronCircleTopLinearIcon} from "@heroui/shared-icons";
 import scrollIntoView from "scroll-into-view-if-needed";
 
 import {HeroUIProCallout} from "./heroui-pro-callout";
 
-import {Heading} from "@/libs/docs/utils";
 import {useScrollSpy} from "@/hooks/use-scroll-spy";
 import {useScrollPosition} from "@/hooks/use-scroll-position";
 import emitter from "@/libs/emitter";
@@ -67,7 +69,7 @@ export const DocsToc: FC<DocsTocProps> = ({headings}) => {
   }, []);
 
   return (
-    <div className={clsx("fixed", isProBannerVisible ? "top-32" : "top-20")}>
+    <div className={cn("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"
@@ -84,10 +86,11 @@ export const DocsToc: FC<DocsTocProps> = ({headings}) => {
               heading.level > 1 && (
                 <li
                   key={i}
-                  className={clsx(
+                  className={cn(
+                    "relative",
                     "transition-colors",
                     "font-normal",
-                    "flex items-center text-tiny font-normal text-default-500 dark:text-default-300",
+                    "flex items-center text-tiny font-normal text-default-500",
                     "data-[active=true]:text-foreground",
                     "dark:data-[active=true]:text-foreground",
                     "before:content-['']",

apps/docs/components/featurebase/fb-roadmap-link.tsx

@@ -4,7 +4,7 @@ import NextLink from "next/link";
 import {usePostHog} from "posthog-js/react";
 import arrowRightUpIcon from "@iconify/icons-solar/arrow-right-up-linear";
 import {Icon} from "@iconify/react/dist/offline";
-import {clsx} from "@heroui/shared-utils";
+import {cn} from "@heroui/theme";
 
 type Props = {
   className?: string;
@@ -24,16 +24,16 @@ export const FbRoadmapLink = ({className, innerClassName}: Props) => {
 
   return (
     <NextLink
-      className={clsx("inline-flex items-center", className)}
+      className={cn("inline-flex items-center", className)}
       color="foreground"
       href={`${process.env.NEXT_PUBLIC_FB_FEEDBACK_URL}/roadmap`}
       target="_blank"
       onClick={fbLinkOnClick}
     >
-      <div className={clsx("relative", innerClassName)}>
+      <div className={cn("relative", innerClassName)}>
         Roadmap
         <Icon
-          className="absolute right-[-10px] top-0 outline-none transition-transform group-data-[hover=true]:translate-y-0.5 [&>path]:stroke-[2.5px]"
+          className="absolute right-[-10px] top-0 outline-solid outline-transparent transition-transform group-data-[hover=true]:translate-y-0.5 [&>path]:stroke-[2.5px]"
           icon={arrowRightUpIcon}
           width={10}
         />

apps/docs/components/gradient-box.tsx

@@ -1,18 +1,21 @@
-import {ReactNode, forwardRef} from "react";
-import {tv, VariantProps} from "tailwind-variants";
+import type {ReactNode} from "react";
+import type {VariantProps} from "tailwind-variants";
+
+import {forwardRef} from "react";
+import {tv} from "tailwind-variants";
 
 const styles = tv({
   base: "flex relative w-full h-auto",
   variants: {
     to: {
-      top: "bg-gradient-to-t",
-      right: "bg-gradient-to-r",
-      left: "bg-gradient-to-l",
-      bottom: "bg-gradient-to-b",
-      "top-right": "bg-gradient-to-tr",
-      "top-left": "bg-gradient-to-tl",
-      "bottom-right": "bg-gradient-to-br",
-      "bottom-left": "bg-gradient-to-bl",
+      top: "bg-linear-to-t",
+      right: "bg-linear-to-r",
+      left: "bg-linear-to-l",
+      bottom: "bg-linear-to-b",
+      "top-right": "bg-linear-to-tr",
+      "top-left": "bg-linear-to-tl",
+      "bottom-right": "bg-linear-to-br",
+      "bottom-left": "bg-linear-to-bl",
     },
     color: {
       orange: "from-[#FFB457] to-[#FF705B]",

apps/docs/components/heroui-logo.tsx

@@ -1,7 +1,8 @@
+import type {IconSvgProps} from "@/types";
+
 import React from "react";
 import {cn} from "@heroui/theme";
 
-import {IconSvgProps} from "@/types";
 import {dataAttr} from "@/utils";
 export interface LogoProps extends IconSvgProps {
   auto?: boolean;
@@ -20,7 +21,7 @@ export const SmallLogoOutlined: React.FC<LogoProps> = ({
   ...props
 }) => (
   <svg
-    className={cn("data-[auto=true]:sm:hidden block text-foreground", className)}
+    className={cn("sm:data-[auto=true]:hidden block text-foreground", className)}
     data-auto={dataAttr(auto)}
     fill="none"
     height={height || size || 25}
@@ -50,7 +51,7 @@ export const SmallLogo: React.FC<LogoProps> = ({
   ...props
 }) => (
   <svg
-    className={cn("data-[auto=true]:sm:hidden block text-foreground", className)}
+    className={cn("sm:data-[auto=true]:hidden block text-foreground", className)}
     data-auto={dataAttr(auto)}
     fill="none"
     height={height || size || 25}
@@ -70,58 +71,32 @@ export const SmallLogo: React.FC<LogoProps> = ({
   </svg>
 );
 
-export const LargeLogo: React.FC<LogoProps> = ({auto, className, ...props}) => (
+export const Logo: React.FC<LogoProps> = ({className, ...props}) => (
   <svg
-    className={cn(
-      "data-[auto=true]:hidden data-[auto=true]:sm:block block text-foreground",
-      className,
-    )}
-    data-auto={dataAttr(auto)}
+    className={cn(" text-[#18181B] dark:text-[#FFFFFF]", className)}
     fill="none"
-    viewBox="0 0 384 96"
+    viewBox="0 0 275 84"
     {...props}
   >
-    <path d="M374.28 93.12V0.959961H383.688V93.12H374.28Z" fill="currentColor" />
     <path
-      d="M319.093 95.04C312.053 95.04 305.824 93.5893 300.405 90.688C295.029 87.7866 290.805 83.6906 287.733 78.4C284.661 73.1093 283.125 66.9226 283.125 59.84V1.02396L292.597 0.959961V58.624C292.597 63.4026 293.408 67.5413 295.029 71.04C296.65 74.496 298.762 77.3546 301.365 79.616C304.01 81.8346 306.89 83.4773 310.005 84.544C313.12 85.6106 316.149 86.144 319.093 86.144C322.08 86.144 325.13 85.6106 328.245 84.544C331.36 83.4773 334.218 81.8346 336.821 79.616C339.424 77.3546 341.536 74.496 343.157 71.04C344.778 67.5413 345.589 63.4026 345.589 58.624V0.959961H355.061V59.84C355.061 66.9226 353.525 73.1093 350.453 78.4C347.381 83.648 343.136 87.744 337.717 90.688C332.341 93.5893 326.133 95.04 319.093 95.04Z"
+      d="M0 20.9484V46.0463C0 47.2326 0.609876 48.335 1.61325 48.9623L18.7276 59.6627C21.0083 61.0887 23.9623 59.4432 23.9623 56.7468V35.65C23.9623 34.4362 24.6006 33.3125 25.6413 32.6939L36.081 26.489V80.5589C36.081 83.2462 39.0172 84.8932 41.2985 83.4855L58.9629 72.5851C59.976 71.9599 60.5932 70.852 60.5932 69.6585V17.7361C60.5932 15.0618 57.6826 13.4129 55.4006 14.7942L36.081 26.489V3.44098C36.081 0.773993 33.1845 -0.876045 30.9022 0.490798L1.66918 17.9982C0.633988 18.6182 0 19.7387 0 20.9484Z"
       fill="currentColor"
     />
     <path
-      d="M236.239 95.04C229.37 95.04 223.503 93.4827 218.639 90.368C213.775 87.2534 210.042 82.944 207.439 77.44C204.836 71.936 203.535 65.6214 203.535 58.496C203.535 51.2427 204.858 44.8854 207.503 39.424C210.148 33.9627 213.903 29.7173 218.767 26.688C223.674 23.616 229.498 22.08 236.239 22.08C243.151 22.08 249.039 23.6373 253.903 26.752C258.81 29.824 262.543 34.112 265.103 39.616C267.706 45.0774 269.007 51.3707 269.007 58.496C269.007 65.7494 267.706 72.128 265.103 77.632C262.5 83.0934 258.746 87.36 253.839 90.432C248.932 93.504 243.066 95.04 236.239 95.04ZM236.239 86.016C243.919 86.016 249.636 83.4773 253.391 78.4C257.146 73.28 259.023 66.6454 259.023 58.496C259.023 50.1333 257.124 43.4773 253.327 38.528C249.572 33.5787 243.876 31.104 236.239 31.104C231.076 31.104 226.81 32.2773 223.439 34.624C220.111 36.928 217.615 40.1494 215.951 44.288C214.33 48.384 213.519 53.12 213.519 58.496C213.519 66.816 215.439 73.4933 219.279 78.528C223.119 83.52 228.772 86.016 236.239 86.016Z"
+      d="M125.354 46.1061C125.354 38.9888 122.442 35.7039 116.616 35.7039C109.945 35.7039 105.247 40.175 105.247 50.2123V73.2067H93.2203V9.33333H105.247V32.6927C108.16 27.9479 112.952 25.5754 119.529 25.5754C130.71 25.5754 137.287 32.419 137.287 43.9162V73.2067H125.354V46.1061Z"
       fill="currentColor"
     />
     <path
-      d="M162.5 93.12V24H170.948V40.64L169.284 38.464C170.052 36.416 171.055 34.5387 172.292 32.832C173.529 31.0827 174.873 29.6533 176.324 28.544C178.116 26.9653 180.207 25.7707 182.596 24.96C184.985 24.1067 187.396 23.616 189.828 23.488C192.26 23.3173 194.479 23.488 196.484 24V32.832C193.967 32.192 191.215 32.0427 188.228 32.384C185.241 32.7253 182.489 33.92 179.972 35.968C177.668 37.76 175.94 39.9147 174.788 42.432C173.636 44.9067 172.868 47.552 172.484 50.368C172.1 53.1413 171.908 55.8933 171.908 58.624V93.12H162.5Z"
+      d="M167.054 74.6667C152.114 74.6667 142.625 64.9944 142.625 50.121C142.625 35.4302 152.021 25.5754 167.054 25.5754C183.309 25.5754 192.141 37.0726 189.698 53.2235H154.651C155.309 60.8883 159.819 65.2682 167.054 65.2682C172.973 65.2682 176.544 62.257 177.483 59.2458H189.416C187.537 68.1881 179.269 74.6667 167.054 74.6667ZM154.933 45.2849H178.047C177.953 38.9888 173.819 34.7002 166.772 34.7002C160.477 34.7002 156.061 38.3501 154.933 45.2849Z"
       fill="currentColor"
     />
     <path
-      d="M116.873 95.04C110.132 95.04 104.286 93.5467 99.337 90.56C94.4304 87.5734 90.6117 83.3707 87.881 77.952C85.1504 72.5334 83.785 66.176 83.785 58.88C83.785 51.328 85.129 44.8 87.817 39.296C90.505 33.792 94.281 29.5467 99.145 26.56C104.052 23.5733 109.833 22.08 116.489 22.08C123.316 22.08 129.14 23.6587 133.961 26.816C138.782 29.9307 142.43 34.4107 144.905 40.256C147.38 46.1014 148.51 53.0773 148.297 61.184H138.697V57.856C138.526 48.896 136.585 42.1333 132.873 37.568C129.204 33.0027 123.828 30.72 116.745 30.72C109.321 30.72 103.625 33.1307 99.657 37.952C95.7317 42.7734 93.769 49.6427 93.769 58.56C93.769 67.264 95.7317 74.0267 99.657 78.848C103.625 83.6267 109.236 86.016 116.489 86.016C121.438 86.016 125.748 84.8853 129.417 82.624C133.129 80.32 136.052 77.0134 138.185 72.704L146.953 76.096C144.222 82.112 140.19 86.784 134.857 90.112C129.566 93.3974 123.572 95.04 116.873 95.04ZM99 61.184V53.312H143.241V61.184H99Z"
+      d="M196.257 38.7151C196.257 31.1415 200.485 27.0354 208.566 27.0354H223.975V36.8901H208.284V73.2067H196.257V38.7151Z"
       fill="currentColor"
     />
     <path
-      d="M0 93.12V0.959961H9.408V42.496H60.352V0.959961H69.696V93.12H60.352V51.52H9.408V93.12H0Z"
+      d="M250.289 74.6667C235.067 74.6667 225.389 64.9032 225.389 50.121C225.389 35.3389 235.067 25.5754 250.289 25.5754C265.322 25.5754 275 35.3389 275 50.121C275 64.9032 265.322 74.6667 250.289 74.6667ZM250.289 64.7207C257.805 64.7207 262.785 58.9721 262.785 50.121C262.785 41.27 257.805 35.4302 250.289 35.4302C242.678 35.4302 237.698 41.27 237.698 50.121C237.698 58.9721 242.678 64.7207 250.289 64.7207Z"
       fill="currentColor"
     />
   </svg>
 );
-
-export const HeroUILogo: React.FC<LogoProps> = ({auto, small, outlined, ...props}) => {
-  if (outlined) {
-    return <SmallLogoOutlined {...props} />;
-  }
-
-  if (auto) {
-    return (
-      <div>
-        <SmallLogo auto={auto} {...props} />
-        <LargeLogo auto={auto} {...props} />
-      </div>
-    );
-  }
-
-  if (small) {
-    return <SmallLogo {...props} />;
-  }
-
-  return <LargeLogo auto={auto} {...props} />;
-};

apps/docs/components/icons/bold/cli.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const CLIBoldIcon = ({...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/bold/document-code.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const DocumentCodeBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/bold/eye.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const EyeBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/bold/fatrows.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const FatrowsBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/bold/hash.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const HashBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/bold/heart.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const HeartBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/bold/info.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const InfoBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/bold/keyboard-open.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const KeyboardOpenBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/bold/keyboard.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const KeyboardBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/bold/more-square.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const MoreSquareBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/bold/mouse-circle.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const MouseCircleBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/bold/next.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const NextBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/bold/pause-circle.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const PauseCircleBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/bold/pause.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const PauseBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/bold/play.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const PlayBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/bold/previous.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const PreviousBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/bold/repeat-one.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const RepeatOneBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/bold/shuffle.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const ShuffleBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/bold/squares.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const SquaresBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/bug.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const BugIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/circle-info.tsx

@@ -0,0 +1,20 @@
+import type {IconSvgProps} from "@/types";
+
+export const CircleInfo = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-label="CircleInfo"
+    focusable="false"
+    height={size || height}
+    viewBox="0 0 16 16"
+    width={size || width}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      clipRule="evenodd"
+      d="M8 13.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m1-9.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-.25 3a.75.75 0 0 0-1.5 0V11a.75.75 0 0 0 1.5 0z"
+      fill="#A1A1AA"
+      fillRule="evenodd"
+    />
+  </svg>
+);

apps/docs/components/icons/crop.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const CropMinimalistic = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/devices.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const DevicesIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/filters.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const Filters = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/flash.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const FlashIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/gaming-console.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const GamingConsoleIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/heart.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const HeartFilledIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/index.ts

@@ -17,3 +17,4 @@ export * from "./mirror-left";
 export * from "./palette-round";
 export * from "./filters";
 export * from "./scaling";
+export * from "./circle-info";

apps/docs/components/icons/linear/check.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const CheckLinearIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/linear/chevron-right.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const ChevronRightLinearIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/linear/cli.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const CLILinearIcon = ({...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/linear/code-document.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const CodeDocumentLinearIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/linear/copy.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const CopyLinearIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/linear/cubes.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const CubesLinearIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg

apps/docs/components/icons/linear/hash.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const HashLinearIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <svg