ci(changesets): version packages (#5364)

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

@@ -8,7 +8,7 @@ on:
 jobs:
   build:
     name: Build
-    runs-on: ubuntu-latest
+    runs-on: heroui-runner
     steps:
       - name: Checkout branch
         uses: actions/checkout@v4
@@ -21,7 +21,7 @@ jobs:
 
   tests:
     name: Tests
-    runs-on: ubuntu-latest
+    runs-on: heroui-runner
     steps:
       - name: Checkout branch
         uses: actions/checkout@v4
@@ -34,7 +34,7 @@ jobs:
 
   eslint:
     name: ESLint
-    runs-on: ubuntu-latest
+    runs-on: heroui-runner
     steps:
       - name: Checkout branch
         uses: actions/checkout@v4
@@ -47,7 +47,7 @@ jobs:
 
   types:
     name: TypeScript
-    runs-on: ubuntu-latest
+    runs-on: heroui-runner
     steps:
       - name: Checkout branch
         uses: actions/checkout@v4
@@ -60,7 +60,7 @@ jobs:
 
   prettier:
     name: Prettier
-    runs-on: ubuntu-latest
+    runs-on: heroui-runner
     steps:
       - name: Checkout branch
         uses: actions/checkout@v4
@@ -74,7 +74,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

.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

@@ -16,7 +16,7 @@ module.exports = {
   "**/*.{js,ts,jsx,tsx}": async (files) => {
     const filesToLint = await removeIgnoredFiles(files);
 
-    return [`eslint -c .eslintrc.json --max-warnings=0 --fix ${filesToLint}`];
+    return [`eslint --max-warnings=0 --fix ${filesToLint}`];
   },
   "**/*.css": async (files) => {
     const filesToLint = await removeIgnoredFiles(files);

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/docs/[[...slug]]/page.tsx

@@ -1,13 +1,13 @@
 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";
@@ -104,6 +104,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/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/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";

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;

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";
 
@@ -12,7 +13,7 @@ import {siteConfig} from "@/config/site";
 import {fonts} from "@/config/fonts";
 import {Navbar} from "@/components/navbar";
 import {Footer} from "@/components/footer";
-import {ProBanner} from "@/components/pro-banner";
+import {HeroUIChatBanner} from "@/components/heroui-chat-banner";
 
 export const metadata: Metadata = {
   title: {
@@ -75,14 +76,14 @@ 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,
         )}
       >
         <Providers themeProps={{attribute: "class", defaultTheme: "dark"}}>
           <div className="relative flex flex-col" id="app-container">
-            <ProBanner />
+            <HeroUIChatBanner />
             <Navbar mobileRoutes={manifest.mobileRoutes} routes={manifest.routes} />
             {children}
             <Analytics mode="production" />

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,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";
@@ -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(() => {

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,

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

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

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

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

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/gradient-box.tsx

@@ -1,5 +1,8 @@
-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",

apps/docs/components/heroui-chat-banner.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import {Icon} from "@iconify/react/dist/offline";
+import arrowRightIcon from "@iconify/icons-solar/arrow-right-linear";
+import {usePathname} from "next/navigation";
+import {useEffect} from "react";
+import {usePostHog} from "posthog-js/react";
+
+import emitter from "@/libs/emitter";
+
+const hideOnPaths = ["examples"];
+
+export const HeroUIChatBanner = () => {
+  const posthog = usePostHog();
+
+  const handleClick = () => {
+    posthog.capture("HeroUI Chat Banner", {
+      action: "click",
+      category: "landing-page",
+    });
+  };
+
+  const pathname = usePathname();
+  const shouldBeVisible = !hideOnPaths.some((path) => pathname.includes(path));
+
+  useEffect(() => {
+    if (!shouldBeVisible) return;
+
+    // listen to scroll event, dispatch an event when scroll is at the top < 48 px
+    const handleScroll = () => {
+      if (window.scrollY < 48) {
+        emitter.emit("proBannerVisibilityChange", "visible");
+      } else {
+        emitter.emit("proBannerVisibilityChange", "hidden");
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [shouldBeVisible]);
+
+  if (!shouldBeVisible) return null;
+
+  return (
+    <div className="relative z-50 isolate flex items-center gap-x-6 overflow-hidden bg-background border-b-1 border-divider px-6 py-2 sm:px-3.5 sm:before:flex-1">
+      <div className="flex w-full items-center justify-between md:justify-center gap-x-3">
+        <a
+          className="text-small flex items-end sm:text-[0.93rem] text-foreground hover:opacity-80 transition-opacity"
+          href="https://heroui.chat?utm_source=heroui.com&utm_medium=top-banner"
+          rel="noopener noreferrer"
+          target="_blank"
+          onClick={handleClick}
+        >
+          <span aria-label="rocket" className="hidden md:block" role="img">
+            🚀
+          </span>
+          <span
+            className="inline-flex md:ml-1 animate-text-gradient font-medium bg-clip-text text-transparent bg-[linear-gradient(90deg,#27272A_0%,#52525B_50%,#52525B_100%)] dark:bg-[linear-gradient(90deg,#E5E5E5_0%,#A1A1AA_50%,#E5E5E5_100%)]"
+            style={{
+              fontSize: "inherit",
+              backgroundSize: "200%",
+              backgroundClip: "text",
+              WebkitBackgroundClip: "text",
+              color: "transparent",
+            }}
+          >
+            Generate, edit and deploy beautiful apps
+          </span>
+        </a>
+        <a
+          className="flex group min-w-[120px] items-center font-semibold text-background bg-foreground shadow-sm gap-1.5 relative overflow-hidden rounded-full p-[1px] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+          href="https://heroui.chat?utm_source=heroui.com&utm_medium=top-banner"
+          rel="noopener noreferrer"
+          onClick={handleClick}
+        >
+          <div className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-foreground group-hover:bg-foreground/70 transition-background px-3 py-1 text-sm font-medium text-background">
+            HeroUI Chat
+            <Icon
+              aria-hidden="true"
+              className="outline-none transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
+              icon={arrowRightIcon}
+              width={16}
+            />
+          </div>
+        </a>
+      </div>
+    </div>
+  );
+};

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;

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

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

apps/docs/components/icons/linear/rotate-left.tsx

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

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

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

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

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

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

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

apps/docs/components/icons/linear/simple-grid.tsx

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

apps/docs/components/icons/linear/tag-user.tsx

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

apps/docs/components/icons/magic.tsx

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