refactor: optimization (#5362)

* chore(deps): bump RA versions

* chore(deps): bump RA versions

* chore(deps): bump RA versions

* chore: changeset

* chore(deps): remove unnecessary dependencies

* fix(calendar): typing issue

* refactor(system): remove unused SupportedCalendars

* refactor(system): move I18nProviderProps to type

* refactor: use `spectrumCalendarProps<DateValue>["createCalendar"]`

* feat: add consistent-type-imports

* fix: eslint

* chore: add changeset

* refactor: remove unused deps

.changeset/popular-students-divide.md

@@ -0,0 +1,68 @@
+---
+"@heroui/use-aria-accordion-item": patch
+"@heroui/use-aria-modal-overlay": patch
+"@heroui/use-aria-multiselect": patch
+"@heroui/react-rsc-utils": patch
+"@heroui/scroll-shadow": patch
+"@heroui/use-aria-accordion": patch
+"@heroui/autocomplete": patch
+"@heroui/number-input": patch
+"@heroui/breadcrumbs": patch
+"@heroui/date-picker": patch
+"@heroui/framer-utils": patch
+"@heroui/shared-icons": patch
+"@heroui/date-input": patch
+"@heroui/pagination": patch
+"@heroui/use-aria-button": patch
+"@heroui/react-utils": patch
+"@heroui/accordion": patch
+"@heroui/input-otp": patch
+"@heroui/use-real-shape": patch
+"@heroui/aria-utils": patch
+"@heroui/test-utils": patch
+"@heroui/calendar": patch
+"@heroui/checkbox": patch
+"@heroui/dropdown": patch
+"@heroui/progress": patch
+"@heroui/skeleton": patch
+"@heroui/use-aria-link": patch
+"@heroui/use-ref-state": patch
+"@heroui/divider": patch
+"@heroui/listbox": patch
+"@heroui/popover": patch
+"@heroui/snippet": patch
+"@heroui/spinner": patch
+"@heroui/tooltip": patch
+"@heroui/avatar": patch
+"@heroui/button": patch
+"@heroui/drawer": patch
+"@heroui/navbar": patch
+"@heroui/ripple": patch
+"@heroui/select": patch
+"@heroui/slider": patch
+"@heroui/spacer": patch
+"@heroui/switch": patch
+"@heroui/alert": patch
+"@heroui/badge": patch
+"@heroui/image": patch
+"@heroui/input": patch
+"@heroui/modal": patch
+"@heroui/radio": patch
+"@heroui/table": patch
+"@heroui/toast": patch
+"@heroui/card": patch
+"@heroui/chip": patch
+"@heroui/code": patch
+"@heroui/form": patch
+"@heroui/link": patch
+"@heroui/menu": patch
+"@heroui/tabs": patch
+"@heroui/user": patch
+"@heroui/system-rsc": patch
+"@heroui/use-theme": patch
+"@heroui/kbd": patch
+"@heroui/system": patch
+"@heroui/theme": patch
+---
+
+consistent type imports

.changeset/silver-dancers-joke.md

@@ -0,0 +1,5 @@
+---
+"@heroui/system": patch
+---
+
+remove unncessary dependencies

.changeset/spicy-dodos-fetch.md

@@ -0,0 +1,44 @@
+---
+"@heroui/accordion": patch
+"@heroui/autocomplete": patch
+"@heroui/breadcrumbs": patch
+"@heroui/button": patch
+"@heroui/calendar": patch
+"@heroui/card": patch
+"@heroui/checkbox": patch
+"@heroui/chip": patch
+"@heroui/date-picker": patch
+"@heroui/divider": patch
+"@heroui/drawer": patch
+"@heroui/form": patch
+"@heroui/kbd": patch
+"@heroui/link": patch
+"@heroui/listbox": patch
+"@heroui/menu": patch
+"@heroui/modal": patch
+"@heroui/number-input": patch
+"@heroui/popover": patch
+"@heroui/progress": patch
+"@heroui/radio": patch
+"@heroui/ripple": patch
+"@heroui/select": patch
+"@heroui/skeleton": patch
+"@heroui/slider": patch
+"@heroui/snippet": patch
+"@heroui/spinner": patch
+"@heroui/switch": patch
+"@heroui/tabs": patch
+"@heroui/toast": patch
+"@heroui/tooltip": patch
+"@heroui/system": patch
+"@heroui/use-aria-accordion": patch
+"@heroui/use-aria-button": patch
+"@heroui/use-aria-link": patch
+"@heroui/use-aria-modal-overlay": patch
+"@heroui/use-aria-multiselect": patch
+"@heroui/use-intersection-observer": patch
+"@heroui/aria-utils": patch
+"@heroui/framer-utils": patch
+---
+
+remove unused dependencies

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

@@ -1,4 +1,5 @@
 import type {Metadata} from "next";
+import type {Route} from "@/libs/docs/page";
 
 import {notFound} from "next/navigation";
 import {allBlogPosts} from "contentlayer2/generated";
@@ -10,7 +11,6 @@ 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";
 

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

@@ -1,4 +1,5 @@
 import type {Metadata} from "next";
+import type {Route} from "@/libs/docs/page";
 
 import {notFound} from "next/navigation";
 import {allDocs} from "contentlayer2/generated";
@@ -7,7 +8,6 @@ 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";

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,5 +1,7 @@
 "use client";
 
+import type {Selection, ChipProps, SortDescriptor} from "@heroui/react";
+
 import {
   Table,
   TableHeader,
@@ -13,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,5 +1,7 @@
 "use client";
 
+import type {Selection, ChipProps, SortDescriptor} from "@heroui/react";
+
 import {
   Table,
   TableHeader,
@@ -13,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/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";
 

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/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,7 +1,9 @@
 "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";

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,5 +1,9 @@
 "use client";
 
+import type {UseCodeDemoProps} from "./use-code-demo";
+import type {WindowResizerProps} from "./window-resizer";
+import type {GradientBoxProps} from "@/components/gradient-box";
+
 import React, {useCallback, useMemo, useRef, useState} from "react";
 import dynamic from "next/dynamic";
 import {addToast, Button, Skeleton, Spinner, Tab, Tabs} from "@heroui/react";
@@ -7,11 +11,10 @@ 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";
 

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;
 

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

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

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

apps/docs/components/icons/mirror-left.tsx

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

apps/docs/components/icons/moon-filled.tsx

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

apps/docs/components/icons/moon.tsx

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

apps/docs/components/icons/palette-round.tsx

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

apps/docs/components/icons/palette.tsx

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

apps/docs/components/icons/radial-blur.tsx

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

apps/docs/components/icons/scaling.tsx

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

apps/docs/components/icons/social.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import type {IconSvgProps} from "@/types";
 
-import {IconSvgProps} from "@/types";
+import React from "react";
 
 const OpenCollectiveIcon: React.FC<IconSvgProps> = ({size = 24, width, height, ...props}) => {
   return (

apps/docs/components/icons/sponsors.tsx

@@ -1,4 +1,4 @@
-import {IconSvgProps} from "@/types";
+import type {IconSvgProps} from "@/types";
 
 export const RelumeLogo = ({width = 152, height = 56, ...props}: IconSvgProps) => (
   <svg fill="none" height={height} width={width} xmlns="http://www.w3.org/2000/svg" {...props}>

apps/docs/components/icons/star.tsx

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

apps/docs/components/icons/sun.tsx

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

apps/docs/components/icons/text-square.tsx

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

apps/docs/components/icons/tick-bold.tsx

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

apps/docs/components/icons/two-tone/keyboard.tsx

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

apps/docs/components/icons/vertical-dots.tsx

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

apps/docs/components/looper-bg.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
+import type {IconSvgProps} from "@/types";
 
-import {IconSvgProps} from "@/types";
+import * as React from "react";
 
 export const LooperBg: React.FC<IconSvgProps> = ({width = 1440, height = 1343, ...props}) => (
   <svg

apps/docs/components/marketing/custom-themes/styles.ts

@@ -1,4 +1,6 @@
-import {tv, VariantProps} from "tailwind-variants";
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
 
 export const shopCartStyles = tv({
   slots: {