ci(changesets): version packages (#5482)

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

.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,6 +4,7 @@ on:
   pull_request:
     branches:
       - canary
+      - beta/release-next
 
 jobs:
   build:

.github/workflows/pre-release.yaml

@@ -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

.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,9 @@ 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
+
+# Chat
+IMPORT_API_KEY=your-import-api-key
+CHAT_API_URL=
+CHAT_URL=

apps/docs/actions/open-in-chat.ts

@@ -0,0 +1,100 @@
+"use server";
+
+import {toKebabCase, toPascalCase} from "@/components/docs/components/code-demo/utils";
+
+const importReact = 'import React from "react";';
+
+export const openInChat = async ({
+  component,
+  title,
+  content,
+  dependencies,
+  useWrapper,
+}: {
+  component: string;
+  title?: string;
+  content: string;
+  dependencies: {name: string; version: string}[];
+  useWrapper: boolean;
+}) => {
+  try {
+    // Check if the file content includes 'React' import statements, if not, add it
+    if (
+      content.includes("React.") &&
+      !content.includes("from 'react'") &&
+      !content.includes('from "react"')
+    ) {
+      content = `${importReact}\n${content}\n`;
+    }
+
+    let files: Record<string, string> = {
+      "src/App.tsx": content,
+    };
+
+    const fullName = `${component.charAt(0).toUpperCase() + component.slice(1)} - ${title}`;
+
+    if (useWrapper) {
+      files = getFilesWithWrapper(fullName, content);
+    }
+
+    const response = await fetch(`${process.env.CHAT_API_URL}/import`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.IMPORT_API_KEY}`,
+      },
+      body: JSON.stringify({
+        title: `${component.charAt(0).toUpperCase() + component.slice(1)} - ${title}`,
+        files,
+        dependencies,
+      }),
+    });
+
+    const result = await response.json();
+
+    if (result.error || !result.path) {
+      return {
+        error: result.error ?? "Unknown error",
+        data: null,
+      };
+    }
+
+    return {
+      error: null,
+      data: `${process.env.CHAT_URL}${
+        result.path
+      }&utm_source=heroui.com&utm_medium=open-in-chat&utm_content=${encodeURIComponent(
+        title ?? "unknown",
+      )}`,
+    };
+  } catch (error) {
+    return {error: error, data: null};
+  }
+};
+
+const getFilesWithWrapper = (name: string, content: string) => {
+  const pascalName = toPascalCase(name);
+  const kebabName = toKebabCase(name);
+
+  // Replace the export default function name
+  const updatedContent = content.replace(
+    "export default function App()",
+    `export default function ${pascalName}()`,
+  );
+
+  const wrapperContent = `import ${pascalName} from "./components/${kebabName}";
+
+export default function App() {
+  return (
+    <div className="flex min-h-screen items-center justify-center p-6">
+      <${pascalName} />
+    </div>
+  );
+}
+`;
+
+  return {
+    [`src/components/${kebabName}.tsx`]: updatedContent,
+    [`src/App.tsx`]: wrapperContent,
+  };
+};

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";
@@ -469,7 +467,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 +519,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;
@@ -461,7 +459,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,6 +1,7 @@
 import "@/styles/globals.css";
 import "@/styles/sandpack.css";
-import {Metadata, Viewport} from "next";
+import type {Metadata, Viewport} from "next";
+
 import {clsx} from "@heroui/shared-utils";
 import {Analytics} from "@vercel/analytics/next";
 
@@ -75,7 +76,7 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
       <head />
       <body
         className={clsx(
-          "min-h-screen bg-background font-sans antialiased",
+          "min-h-screen text-foreground bg-background font-sans antialiased",
           fonts.sans.variable,
           fonts.mono.variable,
         )}

apps/docs/app/page.tsx

@@ -17,7 +17,7 @@ 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} />

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} 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";

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,4 +1,5 @@
-import {ReactNode, FC} from "react";
+import type {ReactNode, FC} from "react";
+
 import {clsx} from "@heroui/shared-utils";
 export interface BgGridContainerProps {
   showGradient?: boolean;

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,10 +1,13 @@
 /* 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";
@@ -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(() => {
@@ -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-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/copy-button.tsx

@@ -1,4 +1,5 @@
-import {ButtonProps} from "@heroui/react";
+import type {ButtonProps} from "@heroui/react";
+
 import {useClipboard} from "@heroui/use-clipboard";
 import {memo} from "react";
 

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,7 +1,10 @@
 "use client";
 
-import {Card, CardBody, Button, Image, Slider, CardProps} from "@heroui/react";
-import {useState, FC} from "react";
+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 {clsx} from "@heroui/shared-utils";
 import NextImage from "next/image";
 
@@ -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/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,35 @@
 "use client";
 
-import React, {useCallback, useMemo, useRef} from "react";
+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, useState} from "react";
 import dynamic from "next/dynamic";
-import {Skeleton, Tab, Tabs} from "@heroui/react";
+import {addToast, Button, Skeleton, Spinner, Tab, Tabs} from "@heroui/react";
 import {useInView} from "framer-motion";
+import {usePostHog} from "posthog-js/react";
+import {usePathname} from "next/navigation";
 
-import {useCodeDemo, UseCodeDemoProps} from "./use-code-demo";
-import WindowResizer, {WindowResizerProps} from "./window-resizer";
+import {useCodeDemo} from "./use-code-demo";
+import WindowResizer from "./window-resizer";
+import {parseDependencies} from "./parse-dependencies";
 
-import {GradientBoxProps} from "@/components/gradient-box";
+import {SmallLogo} from "@/components/heroui-logo";
+import {openInChat} from "@/actions/open-in-chat";
 
 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" />,
 });
 
@@ -75,6 +83,11 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
     margin: "600px",
   });
 
+  const pathname = usePathname();
+  const posthog = usePostHog();
+
+  const [isLoading, setIsLoading] = useState(false);
+
   const {noInline, code} = useCodeDemo({
     files,
   });
@@ -166,24 +179,106 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
     return true;
   }, [showTabs, showPreview, showEditor]);
 
+  const isComponentsPage = pathname.includes("/components/");
+
+  const handleOpenInChat = useCallback(async () => {
+    setIsLoading(true);
+
+    // assume doc demo files are all App.jsx
+    const content = files["/App.jsx"];
+
+    if (!content || typeof content !== "string") {
+      addToast({
+        title: "Error",
+        description: "Invalid demo content",
+        color: "danger",
+      });
+
+      return;
+    }
+
+    const component = pathname.split("/components/")[1];
+    const dependencies = parseDependencies(content);
+
+    posthog.capture("CodeDemo - Open in Chat", {
+      component,
+      demo: title,
+    });
+
+    const newTab = window.open(undefined, "_blank");
+
+    const {data, error} = await openInChat({
+      component,
+      title,
+      content,
+      dependencies,
+      useWrapper: !asIframe,
+    });
+
+    setIsLoading(false);
+
+    if (error || !data) {
+      if (newTab) newTab.close();
+      posthog.capture("CodeDemo - Open in Chat Error", {
+        component,
+        demo: title,
+        error: error ?? "Unknown error",
+      });
+
+      addToast({
+        title: "Error",
+        description: error ?? "Unknown error",
+        color: "danger",
+      });
+
+      return;
+    }
+
+    if (newTab) newTab.location.href = data;
+  }, [pathname, title, files, posthog]);
+
   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>
+          {isComponentsPage && (
+            <Button
+              disableRipple
+              className="absolute rounded-[9px] right-1 top-1 border-1 border-default-200 dark:border-default-100 data-[hover=true]:bg-default-50/80"
+              isDisabled={isLoading}
+              size="sm"
+              variant="bordered"
+              onPress={handleOpenInChat}
+            >
+              Open in Chat{" "}
+              {isLoading ? (
+                <Spinner
+                  classNames={{wrapper: "h-4 w-4"}}
+                  color="current"
+                  size="sm"
+                  variant="simple"
+                />
+              ) : (
+                <SmallLogo className="w-4 h-4" />
+              )}
+            </Button>
+          )}
+        </>
       ) : (
         <>
           {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.8.2",
+  "@react-aria/i18n": "3.12.10",
+};

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

@@ -1,3 +1,6 @@
+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";
@@ -5,10 +8,9 @@ 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";

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

@@ -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 ? (
@@ -152,7 +152,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),
                       },
                     )}

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/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/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 {Spacer, Link as HeroUILink, Chip, dataFocusVisibleClasses} 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";
 
@@ -192,7 +196,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
       aria-expanded={dataAttr(hasChildNodes ? isExpanded : undefined)}
       aria-selected={dataAttr(isSelected)}
       className={clsx(
-        "flex flex-col outline-none w-full tap-highlight-transparent",
+        "flex flex-col outline-solid outline-transparent w-full tap-highlight-transparent",
         hasChildNodes ? "mb-4" : "first:mt-4",
         // focus ring
         ...dataFocusVisibleClasses,
@@ -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}

apps/docs/components/docs/toc.tsx

@@ -1,6 +1,9 @@
 "use client";
 
-import {FC, useRef, useEffect, useState} from "react";
+import type {FC} from "react";
+import type {Heading} from "@/libs/docs/utils";
+
+import {useRef, useEffect, useState} from "react";
 import {clsx} from "@heroui/shared-utils";
 import {Divider, Spacer} from "@heroui/react";
 import {ChevronCircleTopLinearIcon} from "@heroui/shared-icons";
@@ -8,7 +11,6 @@ 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";

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

@@ -33,7 +33,7 @@ export const FbRoadmapLink = ({className, innerClassName}: Props) => {
       <div className={clsx("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-chat-banner.tsx

@@ -80,7 +80,7 @@ export const HeroUIChatBanner = () => {
             HeroUI Chat
             <Icon
               aria-hidden="true"
-              className="outline-none transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
+              className="outline-solid outline-transparent transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
               icon={arrowRightIcon}
               width={16}
             />

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}
@@ -73,7 +74,7 @@ export const SmallLogo: React.FC<LogoProps> = ({
 export const LargeLogo: React.FC<LogoProps> = ({auto, className, ...props}) => (
   <svg
     className={cn(
-      "data-[auto=true]:hidden data-[auto=true]:sm:block block text-foreground",
+      "data-[auto=true]:hidden sm:data-[auto=true]:block block text-foreground",
       className,
     )}
     data-auto={dataAttr(auto)}

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

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const CircleInfo = ({size = 24, width, height, ...props}: IconSvgProps) => (
   <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/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

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

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const HeartLinearIcon = ({
   size = 24,

apps/docs/components/icons/linear/html-logo.tsx

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

apps/docs/components/icons/linear/link-circle.tsx

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

apps/docs/components/icons/linear/link-squared.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const LinkSquaredLinearIcon = ({
   size = 24,

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

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const LinkLinearIcon = ({
   size = 24,

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

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

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

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

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

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

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

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

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

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