diff --git a/docs/www/__registry__/index.tsx b/docs/www/__registry__/index.tsx
index ab4877d..a912804 100644
--- a/docs/www/__registry__/index.tsx
+++ b/docs/www/__registry__/index.tsx
@@ -11,7 +11,7 @@ export const Index: Record<string, any> = {
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/DuckButton")),
       source: "",
-      files: ["registry/default/ui/DuckButton"],
+      files: ["registry/default/ui/DuckButton.tsx"],
       category: "undefined",
       subcategory: "undefined",
       chunks: []
diff --git a/docs/www/components/variantsSwitcher.tsx b/docs/www/components/variantsSwitcher.tsx
index 30fa303..1917e12 100644
--- a/docs/www/components/variantsSwitcher.tsx
+++ b/docs/www/components/variantsSwitcher.tsx
@@ -1,5 +1,5 @@
 import { cn } from '@/lib/cn'
-import { DuckButton } from '@/registry/default/ui/DuckButton'
+import { DuckButton } from '@/registry/default/ui'
 import {
   Input,
   Label,
diff --git a/docs/www/content/docs/components/Button.mdx b/docs/www/content/docs/components/Button.mdx
index 16b7bfb..624a0c1 100644
--- a/docs/www/content/docs/components/Button.mdx
+++ b/docs/www/content/docs/components/Button.mdx
@@ -1,6 +1,7 @@
 ---
 title: DuckButton
-description: The DuckButton component provides a versatile and customizable button element, ideal for various UI needs. It supports keyboard shortcuts, tooltips, and advanced styling options.
+description: The DuckButton component is a highly customizable and versatile button component that can be integrated into various parts of your React application. It supports icons, labels, commands, and various styling options, making it adaptable to different use cases.
+
 featured: true
 component: true
 ---
@@ -64,14 +65,9 @@ import { Inbox } from 'lucide-react';
 
 ```tsx
 <DuckButton
-  button={{
-    icon: Inbox,
-    title: 'Inbox',
-    label: '5',
-    variant: 'default',
-    size: 'default',
-    // ..etc
-  }}
+  icon={Inbox}
+  title={'Inbox'}
+  label={'4'}
 />
 ```
 
@@ -84,16 +80,13 @@ import { buttonVariants } from "@/components/Ui"
 ```
 
 ```tsx
-<Link className={buttonVariants({ variant: "outline" })}>Click here</Link>
+<Link className={buttonVariants({ variant: "outline" })}>Click me</Link>
 ```
 
 Alternatively, you can set the `asChild` parameter and nest the link component.
 
 ```tsx
-<Button
-  button={{
-    asChild: true,
-  }}
+<Button asChild>
   <Link href="/login">Login</Link>
 </Button>
 ```
@@ -107,3 +100,64 @@ Alternatively, you can set the `asChild` parameter and nest the link component.
 ### Advanced
 
 <ComponentPreview name="DuckButtonAdvancedDemo" description="Advanced button" />
+
+
+
+## DuckButtonProps
+
+The `DuckButtonProps` interface defines the properties that can be passed to the `DuckButton` component.
+
+### Parameters
+
+| Parameter        | Type                                                  | Description                                                                                       |
+| ---------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| `asChild`        | `boolean` (optional)                                  | Determines if the button should be rendered as a child element, useful for custom wrappers.        |
+| `isCollapsed`    | `boolean` (optional)                                  | Indicates if the button is in a collapsed state, potentially affecting its visibility or content.  |
+| `icon`           | `LucideIcon` (optional)                               | The icon to display within the button.                                                            |
+| `label`          | `string` (optional)                                   | The text label to display on the button.                                                          |
+| `command`        | [`CommandType`](#commandtype) (optional)              | Configuration for keyboard shortcuts, including key, label, and action.                           |
+| `delayDuration`  | `number` (optional)                                   | The delay duration (in milliseconds) before executing the button's action or command.             |
+| `variant`        | [`Variant`](#variant) (optional)                      | Defines the visual style of the button (e.g., `default`, `destructive`, `outline`, etc.).          |
+| `size`           | [`Size`](#size) (optional)                            | Defines the size of the button (e.g., `default`, `sm`, `lg`, `icon`).                             |
+
+## CommandType
+
+The `CommandType` interface defines the properties for configuring keyboard shortcuts and actions associated with the button.
+
+### Fields
+
+| Field     | Type                                  | Description                                                        |
+| --------- | ------------------------------------- | ------------------------------------------------------------------ |
+| `label`   | `string`                              | The label to display for the command.                              |
+| `key`     | `string`                              | The keyboard shortcut key associated with the command.             |
+| `state`   | `unknown` (optional)                  | Optional state data to pass with the command.                      |
+| `action`  | `<T>(arg?: T) => void` (optional)     | The function to execute when the command is triggered.             |
+
+## Variants
+
+The `variant` property allows you to define the visual style of the button. It is derived from the `buttonVariants` utility.
+
+### Variant Options
+
+| Variant       | Description                                                                 |
+| ------------- | --------------------------------------------------------------------------- |
+| `default`     | The default button style.                                                   |
+| `destructive` | A style used to indicate a destructive action, such as delete or remove.    |
+| `outline`     | A button with an outlined border and transparent background.                |
+| `secondary`   | A secondary style, typically used for less prominent actions.               |
+| `ghost`       | A button with a transparent background, typically used for subtle actions.  |
+| `link`        | A button styled as a hyperlink.                                             |
+
+## Sizes
+
+The `size` property allows you to define the size of the button. It is also derived from the `buttonVariants` utility.
+
+### Size Options
+
+| Size     | Description                                                                |
+| -------- | -------------------------------------------------------------------------- |
+| `default`| The default button size.                                                   |
+| `sm`     | A small button size, suitable for compact spaces.                          |
+| `lg`     | A large button size, suitable for more prominent actions.                  |
+| `icon`   | A button size optimized for displaying icons without labels.               |
+
diff --git a/docs/www/content/docs/installation/next.mdx b/docs/www/content/docs/installation/next.mdx
index 8a217b8..bc87e4e 100644
--- a/docs/www/content/docs/installation/next.mdx
+++ b/docs/www/content/docs/installation/next.mdx
@@ -39,7 +39,7 @@ Here's how I configure Inter for Next.js:
 
 **1. Import the font in the root layout:**
 
-```js showLineNumbers title=app/layout.tsx {2,5-8,16-17}
+```js showLineNumbers title=app/layout.tsx {2,6-9,16-19}
 import "@/styles/globals.css"
 import { Inter as FontSans } from "next/font/google"
 
@@ -140,12 +140,12 @@ Here's how I structure my Next.js apps. You can use this as a reference:
 You can now start adding components to your project.
 
 ```bash
-npx shadcn-ui@latest add duck-button
+npx duck-ui@latest add button
 ```
 
 The command above will add the `DuckButton` component to your project. You can then import it like this:
 
-```tsx {1,7-16} showLineNumbers
+```tsx {1,7-11} showLineNumbers
 import { DuckButton } from "@/components/ui"
 import { Inbox } from 'lucide-react'
 
@@ -153,14 +153,9 @@ export default function Home() {
   return (
     <div>
       <DuckButton
-        button={{
-          icon: Inbox,
-          title: 'Inbox',
-          label: '5',
-          variant: 'primary',
-          size: 'default',
-          onClick: () => alert('Inbox button clicked!'),
-        }}
+        icon={Inbox}
+        title={'Inbox'}
+        label={'4'}
       />
     </div>
   )
diff --git a/docs/www/content/docs/installation/vite.mdx b/docs/www/content/docs/installation/vite.mdx
index fc43d36..686506c 100644
--- a/docs/www/content/docs/installation/vite.mdx
+++ b/docs/www/content/docs/installation/vite.mdx
@@ -121,12 +121,12 @@ Are you using React Server Components? › no / yes (no)
 You can now start adding components to your project.
 
 ```bash
-npx duck-ui@latest add duck-button
+npx duck-ui@latest add button
 ```
 
 The command above will add the `DuckButton` component to your project. You can then import it like this:
 
-```tsx {1,7-16} showLineNumbers
+```tsx {1,7-11} showLineNumbers
 import { DuckButton } from "@/components/ui"
 import { Inbox } from 'lucide-react'
 
@@ -134,14 +134,9 @@ export default function Home() {
   return (
     <div>
       <DuckButton
-        button={{
-          icon: Inbox,
-          title: 'Inbox',
-          label: '5',
-          variant: 'primary',
-          size: 'default',
-          onClick: () => alert('Inbox button clicked!'),
-        }}
+        icon={Inbox}
+        title={'Inbox'}
+        label={'4'}
       />
     </div>
   )
diff --git a/docs/www/public/registry/index.json b/docs/www/public/registry/index.json
index d372370..85938bc 100644
--- a/docs/www/public/registry/index.json
+++ b/docs/www/public/registry/index.json
@@ -2,10 +2,10 @@
   {
     "name": "DuckButton",
     "dependencies": [
-      "@radix-ui/react-accordion"
+      "@radix-ui/react-slot"
     ],
     "files": [
-      "ui/DuckButton"
+      "ui/DuckButton.tsx"
     ],
     "type": "components:ui"
   }
diff --git a/docs/www/public/registry/styles/default/DuckButton.json b/docs/www/public/registry/styles/default/DuckButton.json
index 905e240..b7f2efc 100644
--- a/docs/www/public/registry/styles/default/DuckButton.json
+++ b/docs/www/public/registry/styles/default/DuckButton.json
@@ -1,12 +1,12 @@
 {
   "name": "DuckButton",
   "dependencies": [
-    "@radix-ui/react-accordion"
+    "@radix-ui/react-slot"
   ],
   "files": [
     {
       "name": "DuckButton.tsx",
-      "content": "import React from 'react'\nimport { cn } from '@/lib'\nimport { Slot } from '@radix-ui/react-slot'\nimport { CommandShortcut, Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/ui'\nimport { DuckButtonProps } from './DuckButton.types'\nimport { buttonVariants } from './DuckButton.local'\n\nconst DuckButton = React.forwardRef<HTMLButtonElement, DuckButtonProps>(\n  ({ button, delayDuration = 0, command }: DuckButtonProps, ref: React.ForwardedRef<HTMLButtonElement> | undefined) => {\n    const { asChild, isCollapsed, size, variant, className, label, title, icon, ...props } = button\n    const Component = asChild ? Slot : 'button'\n\n    // Handle keyboard shortcuts\n    React.useEffect(() => {\n      if (command?.key) {\n        const handleKeyDown = (e: KeyboardEvent) => {\n          if (e.key === command.key && (e.metaKey || e.ctrlKey)) {\n            e.preventDefault()\n            command.action && command.action()\n          }\n        }\n\n        document.addEventListener('keydown', handleKeyDown)\n        return () => document.removeEventListener('keydown', handleKeyDown)\n      }\n    }, [command])\n\n    return (\n      <Tooltip delayDuration={delayDuration}>\n        <TooltipTrigger asChild>\n          <Component\n            ref={ref}\n            className={cn(\n              buttonVariants({\n                variant: variant || 'ghost',\n                size: isCollapsed ? 'icon' : 'default',\n                className: cn(!isCollapsed && 'flex items-center gap-2 justify-start w-[250px] h-[40px]', className),\n              }),\n            )}\n            {...props}\n          >\n            {button.icon && <button.icon className=\"w-[1.15rem] h-[1.15rem]\" />}\n            {!isCollapsed && title && <span className=\"text-[.9rem]\">{title}</span>}\n            {!isCollapsed && command && <CommandShortcut className=\"text-[.8rem]\">{command.label}</CommandShortcut>}\n            {!isCollapsed && label && <span className=\"ml-auto text-[.9rem]\">{label}</span>}\n          </Component>\n        </TooltipTrigger>\n        {isCollapsed && (title || label) && (\n          <TooltipContent\n            side=\"right\"\n            className=\"flex items-center gap-4 z-50 justify-start\"\n          >\n            {title}\n            {command && <CommandShortcut className=\"text-[.9rem]\">{command.label}</CommandShortcut>}\n            {label && <span className=\"ml-auto text-muted-foreground\">{label}</span>}\n          </TooltipContent>\n        )}\n      </Tooltip>\n    )\n  },\n)\n\nDuckButton.displayName = 'DuckButton'\n\nexport { DuckButton }\n"
+      "content": "import React from 'react'\nimport { cn } from '@/lib'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva } from 'class-variance-authority'\nimport { VariantProps } from 'class-variance-authority'\nimport { LucideIcon } from 'lucide-react'\nimport { Badge, CommandShortcut, Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/ui'\n\nexport interface DuckButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n  isCollapsed?: boolean\n  icon?: LucideIcon\n  label?: string\n  route?: string\n  command?: CommandType\n  delayDuration?: number\n}\n\nexport type CommandType = {\n  label: string\n  key: string\n  state?: unknown\n  action?: <T>(arg?: T) => void\n}\n\nconst buttonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-10 px-4 py-2',\n        sm: 'h-9 rounded-md px-3',\n        lg: 'h-11 rounded-md px-8',\n        icon: 'h-10 w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nconst DuckButton = React.forwardRef<HTMLButtonElement, DuckButtonProps>(\n  (\n    {\n      asChild,\n      isCollapsed = false,\n      size = 'default',\n      variant = 'default',\n      title,\n      className,\n      label,\n      children,\n      icon: Icon,\n      delayDuration = 0,\n      command,\n      ...props\n    }: DuckButtonProps,\n    ref: React.ForwardedRef<HTMLButtonElement> | undefined,\n  ) => {\n    const Component = asChild ? Slot : 'button'\n\n    // Handle keyboard shortcuts\n    React.useEffect(() => {\n      if (command?.key) {\n        const handleKeyDown = (e: KeyboardEvent) => {\n          if (e.key === command.key && (e.metaKey || e.ctrlKey)) {\n            e.preventDefault()\n            command.action && command.action()\n          }\n        }\n\n        document.addEventListener('keydown', handleKeyDown)\n        return () => document.removeEventListener('keydown', handleKeyDown)\n      }\n    }, [command])\n\n    console.log(size)\n\n    return (\n      <Tooltip delayDuration={delayDuration}>\n        <TooltipTrigger asChild>\n          <Component\n            ref={ref}\n            className={cn(\n              buttonVariants({\n                variant: variant || 'ghost',\n                size: size ? size : isCollapsed ? 'icon' : 'default',\n                className: cn(\n                  !isCollapsed && 'flex items-center gap-2 justify-start w-[220px] h-[40px]',\n                  !isCollapsed && size === 'icon' && 'px-4',\n                  className,\n                ),\n              }),\n            )}\n            {...props}\n          >\n            {!!Icon && <Icon className=\"w-[1.15rem] h-[1.15rem]\" />}\n            {!isCollapsed && (children || title) && <span className=\"text-[.9rem]\">{children || title}</span>}\n            {!isCollapsed && command && <CommandShortcut className=\"text-[.8rem]\">{command.label}</CommandShortcut>}\n            {!isCollapsed && label && <span className=\"ml-auto text-[.9rem]\">{label}</span>}\n          </Component>\n        </TooltipTrigger>\n        {isCollapsed && (title || label) && (\n          <TooltipContent\n            side=\"right\"\n            className=\"flex items-center gap-4 z-50 justify-start\"\n          >\n            {title}\n            {command && (\n              <CommandShortcut className=\"text-[.8rem]\">\n                <Badge className=\"p-0 px-2\">{command.label}</Badge>\n              </CommandShortcut>\n            )}\n            {label && <span className=\"ml-auto text-muted-foreground text-[.9rem]\">{label}</span>}\n          </TooltipContent>\n        )}\n      </Tooltip>\n    )\n  },\n)\nDuckButton.displayName = 'DuckButton'\n\nexport { DuckButton, buttonVariants }\n"
     }
   ],
   "type": "components:ui"
diff --git a/docs/www/registry/colors.ts b/docs/www/registry/colors.ts
index 314130e..0836cce 100644
--- a/docs/www/registry/colors.ts
+++ b/docs/www/registry/colors.ts
@@ -1,1566 +1,1566 @@
 export const colors = {
-  inherit: "inherit",
-  current: "currentColor",
-  transparent: "transparent",
+  inherit: 'inherit',
+  current: 'currentColor',
+  transparent: 'transparent',
   black: {
-    hex: "#000000",
-    rgb: "rgb(0,0,0)",
-    hsl: "hsl(0,0%,0%)",
+    hex: '#000000',
+    rgb: 'rgb(0,0,0)',
+    hsl: 'hsl(0,0%,0%)',
   },
   white: {
-    hex: "#ffffff",
-    rgb: "rgb(255,255,255)",
-    hsl: "hsl(0,0%,100%)",
+    hex: '#ffffff',
+    rgb: 'rgb(255,255,255)',
+    hsl: 'hsl(0,0%,100%)',
   },
   slate: [
     {
       scale: 50,
-      hex: "#f8fafc",
-      rgb: "rgb(248,250,252)",
-      hsl: "hsl(210,40%,98%)",
+      hex: '#f8fafc',
+      rgb: 'rgb(248,250,252)',
+      hsl: 'hsl(210,40%,98%)',
     },
     {
       scale: 100,
-      hex: "#f1f5f9",
-      rgb: "rgb(241,245,249)",
-      hsl: "hsl(210,40%,96.1%)",
+      hex: '#f1f5f9',
+      rgb: 'rgb(241,245,249)',
+      hsl: 'hsl(210,40%,96.1%)',
     },
     {
       scale: 200,
-      hex: "#e2e8f0",
-      rgb: "rgb(226,232,240)",
-      hsl: "hsl(214.3,31.8%,91.4%)",
+      hex: '#e2e8f0',
+      rgb: 'rgb(226,232,240)',
+      hsl: 'hsl(214.3,31.8%,91.4%)',
     },
     {
       scale: 300,
-      hex: "#cbd5e1",
-      rgb: "rgb(203,213,225)",
-      hsl: "hsl(212.7,26.8%,83.9%)",
+      hex: '#cbd5e1',
+      rgb: 'rgb(203,213,225)',
+      hsl: 'hsl(212.7,26.8%,83.9%)',
     },
     {
       scale: 400,
-      hex: "#94a3b8",
-      rgb: "rgb(148,163,184)",
-      hsl: "hsl(215,20.2%,65.1%)",
+      hex: '#94a3b8',
+      rgb: 'rgb(148,163,184)',
+      hsl: 'hsl(215,20.2%,65.1%)',
     },
     {
       scale: 500,
-      hex: "#64748b",
-      rgb: "rgb(100,116,139)",
-      hsl: "hsl(215.4,16.3%,46.9%)",
+      hex: '#64748b',
+      rgb: 'rgb(100,116,139)',
+      hsl: 'hsl(215.4,16.3%,46.9%)',
     },
     {
       scale: 600,
-      hex: "#475569",
-      rgb: "rgb(71,85,105)",
-      hsl: "hsl(215.3,19.3%,34.5%)",
+      hex: '#475569',
+      rgb: 'rgb(71,85,105)',
+      hsl: 'hsl(215.3,19.3%,34.5%)',
     },
     {
       scale: 700,
-      hex: "#334155",
-      rgb: "rgb(51,65,85)",
-      hsl: "hsl(215.3,25%,26.7%)",
+      hex: '#334155',
+      rgb: 'rgb(51,65,85)',
+      hsl: 'hsl(215.3,25%,26.7%)',
     },
     {
       scale: 800,
-      hex: "#1e293b",
-      rgb: "rgb(30,41,59)",
-      hsl: "hsl(217.2,32.6%,17.5%)",
+      hex: '#1e293b',
+      rgb: 'rgb(30,41,59)',
+      hsl: 'hsl(217.2,32.6%,17.5%)',
     },
     {
       scale: 900,
-      hex: "#0f172a",
-      rgb: "rgb(15,23,42)",
-      hsl: "hsl(222.2,47.4%,11.2%)",
+      hex: '#0f172a',
+      rgb: 'rgb(15,23,42)',
+      hsl: 'hsl(222.2,47.4%,11.2%)',
     },
     {
       scale: 950,
-      hex: "#020617",
-      rgb: "rgb(2,6,23)",
-      hsl: "hsl(222.2,84%,4.9%)",
+      hex: '#020617',
+      rgb: 'rgb(2,6,23)',
+      hsl: 'hsl(222.2,84%,4.9%)',
     },
   ],
   gray: [
     {
       scale: 50,
-      hex: "#f9fafb",
-      rgb: "rgb(249,250,251)",
-      hsl: "hsl(210,20%,98%)",
+      hex: '#f9fafb',
+      rgb: 'rgb(249,250,251)',
+      hsl: 'hsl(210,20%,98%)',
     },
     {
       scale: 100,
-      hex: "#f3f4f6",
-      rgb: "rgb(243,244,246)",
-      hsl: "hsl(220,14.3%,95.9%)",
+      hex: '#f3f4f6',
+      rgb: 'rgb(243,244,246)',
+      hsl: 'hsl(220,14.3%,95.9%)',
     },
     {
       scale: 200,
-      hex: "#e5e7eb",
-      rgb: "rgb(229,231,235)",
-      hsl: "hsl(220,13%,91%)",
+      hex: '#e5e7eb',
+      rgb: 'rgb(229,231,235)',
+      hsl: 'hsl(220,13%,91%)',
     },
     {
       scale: 300,
-      hex: "#d1d5db",
-      rgb: "rgb(209,213,219)",
-      hsl: "hsl(216,12.2%,83.9%)",
+      hex: '#d1d5db',
+      rgb: 'rgb(209,213,219)',
+      hsl: 'hsl(216,12.2%,83.9%)',
     },
     {
       scale: 400,
-      hex: "#9ca3af",
-      rgb: "rgb(156,163,175)",
-      hsl: "hsl(217.9,10.6%,64.9%)",
+      hex: '#9ca3af',
+      rgb: 'rgb(156,163,175)',
+      hsl: 'hsl(217.9,10.6%,64.9%)',
     },
     {
       scale: 500,
-      hex: "#6b7280",
-      rgb: "rgb(107,114,128)",
-      hsl: "hsl(220,8.9%,46.1%)",
+      hex: '#6b7280',
+      rgb: 'rgb(107,114,128)',
+      hsl: 'hsl(220,8.9%,46.1%)',
     },
     {
       scale: 600,
-      hex: "#4b5563",
-      rgb: "rgb(75,85,99)",
-      hsl: "hsl(215,13.8%,34.1%)",
+      hex: '#4b5563',
+      rgb: 'rgb(75,85,99)',
+      hsl: 'hsl(215,13.8%,34.1%)',
     },
     {
       scale: 700,
-      hex: "#374151",
-      rgb: "rgb(55,65,81)",
-      hsl: "hsl(216.9,19.1%,26.7%)",
+      hex: '#374151',
+      rgb: 'rgb(55,65,81)',
+      hsl: 'hsl(216.9,19.1%,26.7%)',
     },
     {
       scale: 800,
-      hex: "#1f2937",
-      rgb: "rgb(31,41,55)",
-      hsl: "hsl(215,27.9%,16.9%)",
+      hex: '#1f2937',
+      rgb: 'rgb(31,41,55)',
+      hsl: 'hsl(215,27.9%,16.9%)',
     },
     {
       scale: 900,
-      hex: "#111827",
-      rgb: "rgb(17,24,39)",
-      hsl: "hsl(220.9,39.3%,11%)",
+      hex: '#111827',
+      rgb: 'rgb(17,24,39)',
+      hsl: 'hsl(220.9,39.3%,11%)',
     },
     {
       scale: 950,
-      hex: "#030712",
-      rgb: "rgb(3,7,18)",
-      hsl: "hsl(224,71.4%,4.1%)",
+      hex: '#030712',
+      rgb: 'rgb(3,7,18)',
+      hsl: 'hsl(224,71.4%,4.1%)',
     },
   ],
   zinc: [
     {
       scale: 50,
-      hex: "#fafafa",
-      rgb: "rgb(250,250,250)",
-      hsl: "hsl(0,0%,98%)",
+      hex: '#fafafa',
+      rgb: 'rgb(250,250,250)',
+      hsl: 'hsl(0,0%,98%)',
     },
     {
       scale: 100,
-      hex: "#f4f4f5",
-      rgb: "rgb(244,244,245)",
-      hsl: "hsl(240,4.8%,95.9%)",
+      hex: '#f4f4f5',
+      rgb: 'rgb(244,244,245)',
+      hsl: 'hsl(240,4.8%,95.9%)',
     },
     {
       scale: 200,
-      hex: "#e4e4e7",
-      rgb: "rgb(228,228,231)",
-      hsl: "hsl(240,5.9%,90%)",
+      hex: '#e4e4e7',
+      rgb: 'rgb(228,228,231)',
+      hsl: 'hsl(240,5.9%,90%)',
     },
     {
       scale: 300,
-      hex: "#d4d4d8",
-      rgb: "rgb(212,212,216)",
-      hsl: "hsl(240,4.9%,83.9%)",
+      hex: '#d4d4d8',
+      rgb: 'rgb(212,212,216)',
+      hsl: 'hsl(240,4.9%,83.9%)',
     },
     {
       scale: 400,
-      hex: "#a1a1aa",
-      rgb: "rgb(161,161,170)",
-      hsl: "hsl(240,5%,64.9%)",
+      hex: '#a1a1aa',
+      rgb: 'rgb(161,161,170)',
+      hsl: 'hsl(240,5%,64.9%)',
     },
     {
       scale: 500,
-      hex: "#71717a",
-      rgb: "rgb(113,113,122)",
-      hsl: "hsl(240,3.8%,46.1%)",
+      hex: '#71717a',
+      rgb: 'rgb(113,113,122)',
+      hsl: 'hsl(240,3.8%,46.1%)',
     },
     {
       scale: 600,
-      hex: "#52525b",
-      rgb: "rgb(82,82,91)",
-      hsl: "hsl(240,5.2%,33.9%)",
+      hex: '#52525b',
+      rgb: 'rgb(82,82,91)',
+      hsl: 'hsl(240,5.2%,33.9%)',
     },
     {
       scale: 700,
-      hex: "#3f3f46",
-      rgb: "rgb(63,63,70)",
-      hsl: "hsl(240,5.3%,26.1%)",
+      hex: '#3f3f46',
+      rgb: 'rgb(63,63,70)',
+      hsl: 'hsl(240,5.3%,26.1%)',
     },
     {
       scale: 800,
-      hex: "#27272a",
-      rgb: "rgb(39,39,42)",
-      hsl: "hsl(240,3.7%,15.9%)",
+      hex: '#27272a',
+      rgb: 'rgb(39,39,42)',
+      hsl: 'hsl(240,3.7%,15.9%)',
     },
     {
       scale: 900,
-      hex: "#18181b",
-      rgb: "rgb(24,24,27)",
-      hsl: "hsl(240,5.9%,10%)",
+      hex: '#18181b',
+      rgb: 'rgb(24,24,27)',
+      hsl: 'hsl(240,5.9%,10%)',
     },
     {
       scale: 950,
-      hex: "#09090b",
-      rgb: "rgb(9,9,11)",
-      hsl: "hsl(240,10%,3.9%)",
+      hex: '#09090b',
+      rgb: 'rgb(9,9,11)',
+      hsl: 'hsl(240,10%,3.9%)',
     },
   ],
   neutral: [
     {
       scale: 50,
-      hex: "#fafafa",
-      rgb: "rgb(250,250,250)",
-      hsl: "hsl(0,0%,98%)",
+      hex: '#fafafa',
+      rgb: 'rgb(250,250,250)',
+      hsl: 'hsl(0,0%,98%)',
     },
     {
       scale: 100,
-      hex: "#f5f5f5",
-      rgb: "rgb(245,245,245)",
-      hsl: "hsl(0,0%,96.1%)",
+      hex: '#f5f5f5',
+      rgb: 'rgb(245,245,245)',
+      hsl: 'hsl(0,0%,96.1%)',
     },
     {
       scale: 200,
-      hex: "#e5e5e5",
-      rgb: "rgb(229,229,229)",
-      hsl: "hsl(0,0%,89.8%)",
+      hex: '#e5e5e5',
+      rgb: 'rgb(229,229,229)',
+      hsl: 'hsl(0,0%,89.8%)',
     },
     {
       scale: 300,
-      hex: "#d4d4d4",
-      rgb: "rgb(212,212,212)",
-      hsl: "hsl(0,0%,83.1%)",
+      hex: '#d4d4d4',
+      rgb: 'rgb(212,212,212)',
+      hsl: 'hsl(0,0%,83.1%)',
     },
     {
       scale: 400,
-      hex: "#a3a3a3",
-      rgb: "rgb(163,163,163)",
-      hsl: "hsl(0,0%,63.9%)",
+      hex: '#a3a3a3',
+      rgb: 'rgb(163,163,163)',
+      hsl: 'hsl(0,0%,63.9%)',
     },
     {
       scale: 500,
-      hex: "#737373",
-      rgb: "rgb(115,115,115)",
-      hsl: "hsl(0,0%,45.1%)",
+      hex: '#737373',
+      rgb: 'rgb(115,115,115)',
+      hsl: 'hsl(0,0%,45.1%)',
     },
     {
       scale: 600,
-      hex: "#525252",
-      rgb: "rgb(82,82,82)",
-      hsl: "hsl(0,0%,32.2%)",
+      hex: '#525252',
+      rgb: 'rgb(82,82,82)',
+      hsl: 'hsl(0,0%,32.2%)',
     },
     {
       scale: 700,
-      hex: "#404040",
-      rgb: "rgb(64,64,64)",
-      hsl: "hsl(0,0%,25.1%)",
+      hex: '#404040',
+      rgb: 'rgb(64,64,64)',
+      hsl: 'hsl(0,0%,25.1%)',
     },
     {
       scale: 800,
-      hex: "#262626",
-      rgb: "rgb(38,38,38)",
-      hsl: "hsl(0,0%,14.9%)",
+      hex: '#262626',
+      rgb: 'rgb(38,38,38)',
+      hsl: 'hsl(0,0%,14.9%)',
     },
     {
       scale: 900,
-      hex: "#171717",
-      rgb: "rgb(23,23,23)",
-      hsl: "hsl(0,0%,9%)",
+      hex: '#171717',
+      rgb: 'rgb(23,23,23)',
+      hsl: 'hsl(0,0%,9%)',
     },
     {
       scale: 950,
-      hex: "#0a0a0a",
-      rgb: "rgb(10,10,10)",
-      hsl: "hsl(0,0%,3.9%)",
+      hex: '#0a0a0a',
+      rgb: 'rgb(10,10,10)',
+      hsl: 'hsl(0,0%,3.9%)',
     },
   ],
   stone: [
     {
       scale: 50,
-      hex: "#fafaf9",
-      rgb: "rgb(250,250,249)",
-      hsl: "hsl(60,9.1%,97.8%)",
+      hex: '#fafaf9',
+      rgb: 'rgb(250,250,249)',
+      hsl: 'hsl(60,9.1%,97.8%)',
     },
     {
       scale: 100,
-      hex: "#f5f5f4",
-      rgb: "rgb(245,245,244)",
-      hsl: "hsl(60,4.8%,95.9%)",
+      hex: '#f5f5f4',
+      rgb: 'rgb(245,245,244)',
+      hsl: 'hsl(60,4.8%,95.9%)',
     },
     {
       scale: 200,
-      hex: "#e7e5e4",
-      rgb: "rgb(231,229,228)",
-      hsl: "hsl(20,5.9%,90%)",
+      hex: '#e7e5e4',
+      rgb: 'rgb(231,229,228)',
+      hsl: 'hsl(20,5.9%,90%)',
     },
     {
       scale: 300,
-      hex: "#d6d3d1",
-      rgb: "rgb(214,211,209)",
-      hsl: "hsl(24,5.7%,82.9%)",
+      hex: '#d6d3d1',
+      rgb: 'rgb(214,211,209)',
+      hsl: 'hsl(24,5.7%,82.9%)',
     },
     {
       scale: 400,
-      hex: "#a8a29e",
-      rgb: "rgb(168,162,158)",
-      hsl: "hsl(24,5.4%,63.9%)",
+      hex: '#a8a29e',
+      rgb: 'rgb(168,162,158)',
+      hsl: 'hsl(24,5.4%,63.9%)',
     },
     {
       scale: 500,
-      hex: "#78716c",
-      rgb: "rgb(120,113,108)",
-      hsl: "hsl(25,5.3%,44.7%)",
+      hex: '#78716c',
+      rgb: 'rgb(120,113,108)',
+      hsl: 'hsl(25,5.3%,44.7%)',
     },
     {
       scale: 600,
-      hex: "#57534e",
-      rgb: "rgb(87,83,78)",
-      hsl: "hsl(33.3,5.5%,32.4%)",
+      hex: '#57534e',
+      rgb: 'rgb(87,83,78)',
+      hsl: 'hsl(33.3,5.5%,32.4%)',
     },
     {
       scale: 700,
-      hex: "#44403c",
-      rgb: "rgb(68,64,60)",
-      hsl: "hsl(30,6.3%,25.1%)",
+      hex: '#44403c',
+      rgb: 'rgb(68,64,60)',
+      hsl: 'hsl(30,6.3%,25.1%)',
     },
     {
       scale: 800,
-      hex: "#292524",
-      rgb: "rgb(41,37,36)",
-      hsl: "hsl(12,6.5%,15.1%)",
+      hex: '#292524',
+      rgb: 'rgb(41,37,36)',
+      hsl: 'hsl(12,6.5%,15.1%)',
     },
     {
       scale: 900,
-      hex: "#1c1917",
-      rgb: "rgb(28,25,23)",
-      hsl: "hsl(24,9.8%,10%)",
+      hex: '#1c1917',
+      rgb: 'rgb(28,25,23)',
+      hsl: 'hsl(24,9.8%,10%)',
     },
     {
       scale: 950,
-      hex: "#0c0a09",
-      rgb: "rgb(12,10,9)",
-      hsl: "hsl(20,14.3%,4.1%)",
+      hex: '#0c0a09',
+      rgb: 'rgb(12,10,9)',
+      hsl: 'hsl(20,14.3%,4.1%)',
     },
   ],
   red: [
     {
       scale: 50,
-      hex: "#fef2f2",
-      rgb: "rgb(254,242,242)",
-      hsl: "hsl(0,85.7%,97.3%)",
+      hex: '#fef2f2',
+      rgb: 'rgb(254,242,242)',
+      hsl: 'hsl(0,85.7%,97.3%)',
     },
     {
       scale: 100,
-      hex: "#fee2e2",
-      rgb: "rgb(254,226,226)",
-      hsl: "hsl(0,93.3%,94.1%)",
+      hex: '#fee2e2',
+      rgb: 'rgb(254,226,226)',
+      hsl: 'hsl(0,93.3%,94.1%)',
     },
     {
       scale: 200,
-      hex: "#fecaca",
-      rgb: "rgb(254,202,202)",
-      hsl: "hsl(0,96.3%,89.4%)",
+      hex: '#fecaca',
+      rgb: 'rgb(254,202,202)',
+      hsl: 'hsl(0,96.3%,89.4%)',
     },
     {
       scale: 300,
-      hex: "#fca5a5",
-      rgb: "rgb(252,165,165)",
-      hsl: "hsl(0,93.5%,81.8%)",
+      hex: '#fca5a5',
+      rgb: 'rgb(252,165,165)',
+      hsl: 'hsl(0,93.5%,81.8%)',
     },
     {
       scale: 400,
-      hex: "#f87171",
-      rgb: "rgb(248,113,113)",
-      hsl: "hsl(0,90.6%,70.8%)",
+      hex: '#f87171',
+      rgb: 'rgb(248,113,113)',
+      hsl: 'hsl(0,90.6%,70.8%)',
     },
     {
       scale: 500,
-      hex: "#ef4444",
-      rgb: "rgb(239,68,68)",
-      hsl: "hsl(0,84.2%,60.2%)",
+      hex: '#ef4444',
+      rgb: 'rgb(239,68,68)',
+      hsl: 'hsl(0,84.2%,60.2%)',
     },
     {
       scale: 600,
-      hex: "#dc2626",
-      rgb: "rgb(220,38,38)",
-      hsl: "hsl(0,72.2%,50.6%)",
+      hex: '#dc2626',
+      rgb: 'rgb(220,38,38)',
+      hsl: 'hsl(0,72.2%,50.6%)',
     },
     {
       scale: 700,
-      hex: "#b91c1c",
-      rgb: "rgb(185,28,28)",
-      hsl: "hsl(0,73.7%,41.8%)",
+      hex: '#b91c1c',
+      rgb: 'rgb(185,28,28)',
+      hsl: 'hsl(0,73.7%,41.8%)',
     },
     {
       scale: 800,
-      hex: "#991b1b",
-      rgb: "rgb(153,27,27)",
-      hsl: "hsl(0,70%,35.3%)",
+      hex: '#991b1b',
+      rgb: 'rgb(153,27,27)',
+      hsl: 'hsl(0,70%,35.3%)',
     },
     {
       scale: 900,
-      hex: "#7f1d1d",
-      rgb: "rgb(127,29,29)",
-      hsl: "hsl(0,62.8%,30.6%)",
+      hex: '#7f1d1d',
+      rgb: 'rgb(127,29,29)',
+      hsl: 'hsl(0,62.8%,30.6%)',
     },
     {
       scale: 950,
-      hex: "#450a0a",
-      rgb: "rgb(69,10,10)",
-      hsl: "hsl(0,74.7%,15.5%)",
+      hex: '#450a0a',
+      rgb: 'rgb(69,10,10)',
+      hsl: 'hsl(0,74.7%,15.5%)',
     },
   ],
   orange: [
     {
       scale: 50,
-      hex: "#fff7ed",
-      rgb: "rgb(255,247,237)",
-      hsl: "hsl(33.3,100%,96.5%)",
+      hex: '#fff7ed',
+      rgb: 'rgb(255,247,237)',
+      hsl: 'hsl(33.3,100%,96.5%)',
     },
     {
       scale: 100,
-      hex: "#ffedd5",
-      rgb: "rgb(255,237,213)",
-      hsl: "hsl(34.3,100%,91.8%)",
+      hex: '#ffedd5',
+      rgb: 'rgb(255,237,213)',
+      hsl: 'hsl(34.3,100%,91.8%)',
     },
     {
       scale: 200,
-      hex: "#fed7aa",
-      rgb: "rgb(254,215,170)",
-      hsl: "hsl(32.1,97.7%,83.1%)",
+      hex: '#fed7aa',
+      rgb: 'rgb(254,215,170)',
+      hsl: 'hsl(32.1,97.7%,83.1%)',
     },
     {
       scale: 300,
-      hex: "#fdba74",
-      rgb: "rgb(253,186,116)",
-      hsl: "hsl(30.7,97.2%,72.4%)",
+      hex: '#fdba74',
+      rgb: 'rgb(253,186,116)',
+      hsl: 'hsl(30.7,97.2%,72.4%)',
     },
     {
       scale: 400,
-      hex: "#fb923c",
-      rgb: "rgb(251,146,60)",
-      hsl: "hsl(27,96%,61%)",
+      hex: '#fb923c',
+      rgb: 'rgb(251,146,60)',
+      hsl: 'hsl(27,96%,61%)',
     },
     {
       scale: 500,
-      hex: "#f97316",
-      rgb: "rgb(249,115,22)",
-      hsl: "hsl(24.6,95%,53.1%)",
+      hex: '#f97316',
+      rgb: 'rgb(249,115,22)',
+      hsl: 'hsl(24.6,95%,53.1%)',
     },
     {
       scale: 600,
-      hex: "#ea580c",
-      rgb: "rgb(234,88,12)",
-      hsl: "hsl(20.5,90.2%,48.2%)",
+      hex: '#ea580c',
+      rgb: 'rgb(234,88,12)',
+      hsl: 'hsl(20.5,90.2%,48.2%)',
     },
     {
       scale: 700,
-      hex: "#c2410c",
-      rgb: "rgb(194,65,12)",
-      hsl: "hsl(17.5,88.3%,40.4%)",
+      hex: '#c2410c',
+      rgb: 'rgb(194,65,12)',
+      hsl: 'hsl(17.5,88.3%,40.4%)',
     },
     {
       scale: 800,
-      hex: "#9a3412",
-      rgb: "rgb(154,52,18)",
-      hsl: "hsl(15,79.1%,33.7%)",
+      hex: '#9a3412',
+      rgb: 'rgb(154,52,18)',
+      hsl: 'hsl(15,79.1%,33.7%)',
     },
     {
       scale: 900,
-      hex: "#7c2d12",
-      rgb: "rgb(124,45,18)",
-      hsl: "hsl(15.3,74.6%,27.8%)",
+      hex: '#7c2d12',
+      rgb: 'rgb(124,45,18)',
+      hsl: 'hsl(15.3,74.6%,27.8%)',
     },
     {
       scale: 950,
-      hex: "#431407",
-      rgb: "rgb(67,20,7)",
-      hsl: "hsl(13,81.1%,14.5%)",
+      hex: '#431407',
+      rgb: 'rgb(67,20,7)',
+      hsl: 'hsl(13,81.1%,14.5%)',
     },
   ],
   amber: [
     {
       scale: 50,
-      hex: "#fffbeb",
-      rgb: "rgb(255,251,235)",
-      hsl: "hsl(48,100%,96.1%)",
+      hex: '#fffbeb',
+      rgb: 'rgb(255,251,235)',
+      hsl: 'hsl(48,100%,96.1%)',
     },
     {
       scale: 100,
-      hex: "#fef3c7",
-      rgb: "rgb(254,243,199)",
-      hsl: "hsl(48,96.5%,88.8%)",
+      hex: '#fef3c7',
+      rgb: 'rgb(254,243,199)',
+      hsl: 'hsl(48,96.5%,88.8%)',
     },
     {
       scale: 200,
-      hex: "#fde68a",
-      rgb: "rgb(253,230,138)",
-      hsl: "hsl(48,96.6%,76.7%)",
+      hex: '#fde68a',
+      rgb: 'rgb(253,230,138)',
+      hsl: 'hsl(48,96.6%,76.7%)',
     },
     {
       scale: 300,
-      hex: "#fcd34d",
-      rgb: "rgb(252,211,77)",
-      hsl: "hsl(45.9,96.7%,64.5%)",
+      hex: '#fcd34d',
+      rgb: 'rgb(252,211,77)',
+      hsl: 'hsl(45.9,96.7%,64.5%)',
     },
     {
       scale: 400,
-      hex: "#fbbf24",
-      rgb: "rgb(251,191,36)",
-      hsl: "hsl(43.3,96.4%,56.3%)",
+      hex: '#fbbf24',
+      rgb: 'rgb(251,191,36)',
+      hsl: 'hsl(43.3,96.4%,56.3%)',
     },
     {
       scale: 500,
-      hex: "#f59e0b",
-      rgb: "rgb(245,158,11)",
-      hsl: "hsl(37.7,92.1%,50.2%)",
+      hex: '#f59e0b',
+      rgb: 'rgb(245,158,11)',
+      hsl: 'hsl(37.7,92.1%,50.2%)',
     },
     {
       scale: 600,
-      hex: "#d97706",
-      rgb: "rgb(217,119,6)",
-      hsl: "hsl(32.1,94.6%,43.7%)",
+      hex: '#d97706',
+      rgb: 'rgb(217,119,6)',
+      hsl: 'hsl(32.1,94.6%,43.7%)',
     },
     {
       scale: 700,
-      hex: "#b45309",
-      rgb: "rgb(180,83,9)",
-      hsl: "hsl(26,90.5%,37.1%)",
+      hex: '#b45309',
+      rgb: 'rgb(180,83,9)',
+      hsl: 'hsl(26,90.5%,37.1%)',
     },
     {
       scale: 800,
-      hex: "#92400e",
-      rgb: "rgb(146,64,14)",
-      hsl: "hsl(22.7,82.5%,31.4%)",
+      hex: '#92400e',
+      rgb: 'rgb(146,64,14)',
+      hsl: 'hsl(22.7,82.5%,31.4%)',
     },
     {
       scale: 900,
-      hex: "#78350f",
-      rgb: "rgb(120,53,15)",
-      hsl: "hsl(21.7,77.8%,26.5%)",
+      hex: '#78350f',
+      rgb: 'rgb(120,53,15)',
+      hsl: 'hsl(21.7,77.8%,26.5%)',
     },
     {
       scale: 950,
-      hex: "#451a03",
-      rgb: "rgb(69,26,3)",
-      hsl: "hsl(20.9,91.7%,14.1%)",
+      hex: '#451a03',
+      rgb: 'rgb(69,26,3)',
+      hsl: 'hsl(20.9,91.7%,14.1%)',
     },
   ],
   yellow: [
     {
       scale: 50,
-      hex: "#fefce8",
-      rgb: "rgb(254,252,232)",
-      hsl: "hsl(54.5,91.7%,95.3%)",
+      hex: '#fefce8',
+      rgb: 'rgb(254,252,232)',
+      hsl: 'hsl(54.5,91.7%,95.3%)',
     },
     {
       scale: 100,
-      hex: "#fef9c3",
-      rgb: "rgb(254,249,195)",
-      hsl: "hsl(54.9,96.7%,88%)",
+      hex: '#fef9c3',
+      rgb: 'rgb(254,249,195)',
+      hsl: 'hsl(54.9,96.7%,88%)',
     },
     {
       scale: 200,
-      hex: "#fef08a",
-      rgb: "rgb(254,240,138)",
-      hsl: "hsl(52.8,98.3%,76.9%)",
+      hex: '#fef08a',
+      rgb: 'rgb(254,240,138)',
+      hsl: 'hsl(52.8,98.3%,76.9%)',
     },
     {
       scale: 300,
-      hex: "#fde047",
-      rgb: "rgb(253,224,71)",
-      hsl: "hsl(50.4,97.8%,63.5%)",
+      hex: '#fde047',
+      rgb: 'rgb(253,224,71)',
+      hsl: 'hsl(50.4,97.8%,63.5%)',
     },
     {
       scale: 400,
-      hex: "#facc15",
-      rgb: "rgb(250,204,21)",
-      hsl: "hsl(47.9,95.8%,53.1%)",
+      hex: '#facc15',
+      rgb: 'rgb(250,204,21)',
+      hsl: 'hsl(47.9,95.8%,53.1%)',
     },
     {
       scale: 500,
-      hex: "#eab308",
-      rgb: "rgb(234,179,8)",
-      hsl: "hsl(45.4,93.4%,47.5%)",
+      hex: '#eab308',
+      rgb: 'rgb(234,179,8)',
+      hsl: 'hsl(45.4,93.4%,47.5%)',
     },
     {
       scale: 600,
-      hex: "#ca8a04",
-      rgb: "rgb(202,138,4)",
-      hsl: "hsl(40.6,96.1%,40.4%)",
+      hex: '#ca8a04',
+      rgb: 'rgb(202,138,4)',
+      hsl: 'hsl(40.6,96.1%,40.4%)',
     },
     {
       scale: 700,
-      hex: "#a16207",
-      rgb: "rgb(161,98,7)",
-      hsl: "hsl(35.5,91.7%,32.9%)",
+      hex: '#a16207',
+      rgb: 'rgb(161,98,7)',
+      hsl: 'hsl(35.5,91.7%,32.9%)',
     },
     {
       scale: 800,
-      hex: "#854d0e",
-      rgb: "rgb(133,77,14)",
-      hsl: "hsl(31.8,81%,28.8%)",
+      hex: '#854d0e',
+      rgb: 'rgb(133,77,14)',
+      hsl: 'hsl(31.8,81%,28.8%)',
     },
     {
       scale: 900,
-      hex: "#713f12",
-      rgb: "rgb(113,63,18)",
-      hsl: "hsl(28.4,72.5%,25.7%)",
+      hex: '#713f12',
+      rgb: 'rgb(113,63,18)',
+      hsl: 'hsl(28.4,72.5%,25.7%)',
     },
     {
       scale: 950,
-      hex: "#422006",
-      rgb: "rgb(66,32,6)",
-      hsl: "hsl(26,83.3%,14.1%)",
+      hex: '#422006',
+      rgb: 'rgb(66,32,6)',
+      hsl: 'hsl(26,83.3%,14.1%)',
     },
   ],
   lime: [
     {
       scale: 50,
-      hex: "#f7fee7",
-      rgb: "rgb(247,254,231)",
-      hsl: "hsl(78.3,92%,95.1%)",
+      hex: '#f7fee7',
+      rgb: 'rgb(247,254,231)',
+      hsl: 'hsl(78.3,92%,95.1%)',
     },
     {
       scale: 100,
-      hex: "#ecfccb",
-      rgb: "rgb(236,252,203)",
-      hsl: "hsl(79.6,89.1%,89.2%)",
+      hex: '#ecfccb',
+      rgb: 'rgb(236,252,203)',
+      hsl: 'hsl(79.6,89.1%,89.2%)',
     },
     {
       scale: 200,
-      hex: "#d9f99d",
-      rgb: "rgb(217,249,157)",
-      hsl: "hsl(80.9,88.5%,79.6%)",
+      hex: '#d9f99d',
+      rgb: 'rgb(217,249,157)',
+      hsl: 'hsl(80.9,88.5%,79.6%)',
     },
     {
       scale: 300,
-      hex: "#bef264",
-      rgb: "rgb(190,242,100)",
-      hsl: "hsl(82,84.5%,67.1%)",
+      hex: '#bef264',
+      rgb: 'rgb(190,242,100)',
+      hsl: 'hsl(82,84.5%,67.1%)',
     },
     {
       scale: 400,
-      hex: "#a3e635",
-      rgb: "rgb(163,230,53)",
-      hsl: "hsl(82.7,78%,55.5%)",
+      hex: '#a3e635',
+      rgb: 'rgb(163,230,53)',
+      hsl: 'hsl(82.7,78%,55.5%)',
     },
     {
       scale: 500,
-      hex: "#84cc16",
-      rgb: "rgb(132,204,22)",
-      hsl: "hsl(83.7,80.5%,44.3%)",
+      hex: '#84cc16',
+      rgb: 'rgb(132,204,22)',
+      hsl: 'hsl(83.7,80.5%,44.3%)',
     },
     {
       scale: 600,
-      hex: "#65a30d",
-      rgb: "rgb(101,163,13)",
-      hsl: "hsl(84.8,85.2%,34.5%)",
+      hex: '#65a30d',
+      rgb: 'rgb(101,163,13)',
+      hsl: 'hsl(84.8,85.2%,34.5%)',
     },
     {
       scale: 700,
-      hex: "#4d7c0f",
-      rgb: "rgb(77,124,15)",
-      hsl: "hsl(85.9,78.4%,27.3%)",
+      hex: '#4d7c0f',
+      rgb: 'rgb(77,124,15)',
+      hsl: 'hsl(85.9,78.4%,27.3%)',
     },
     {
       scale: 800,
-      hex: "#3f6212",
-      rgb: "rgb(63,98,18)",
-      hsl: "hsl(86.3,69%,22.7%)",
+      hex: '#3f6212',
+      rgb: 'rgb(63,98,18)',
+      hsl: 'hsl(86.3,69%,22.7%)',
     },
     {
       scale: 900,
-      hex: "#365314",
-      rgb: "rgb(54,83,20)",
-      hsl: "hsl(87.6,61.2%,20.2%)",
+      hex: '#365314',
+      rgb: 'rgb(54,83,20)',
+      hsl: 'hsl(87.6,61.2%,20.2%)',
     },
     {
       scale: 950,
-      hex: "#1a2e05",
-      rgb: "rgb(26,46,5)",
-      hsl: "hsl(89.3,80.4%,10%)",
+      hex: '#1a2e05',
+      rgb: 'rgb(26,46,5)',
+      hsl: 'hsl(89.3,80.4%,10%)',
     },
   ],
   green: [
     {
       scale: 50,
-      hex: "#f0fdf4",
-      rgb: "rgb(240,253,244)",
-      hsl: "hsl(138.5,76.5%,96.7%)",
+      hex: '#f0fdf4',
+      rgb: 'rgb(240,253,244)',
+      hsl: 'hsl(138.5,76.5%,96.7%)',
     },
     {
       scale: 100,
-      hex: "#dcfce7",
-      rgb: "rgb(220,252,231)",
-      hsl: "hsl(140.6,84.2%,92.5%)",
+      hex: '#dcfce7',
+      rgb: 'rgb(220,252,231)',
+      hsl: 'hsl(140.6,84.2%,92.5%)',
     },
     {
       scale: 200,
-      hex: "#bbf7d0",
-      rgb: "rgb(187,247,208)",
-      hsl: "hsl(141,78.9%,85.1%)",
+      hex: '#bbf7d0',
+      rgb: 'rgb(187,247,208)',
+      hsl: 'hsl(141,78.9%,85.1%)',
     },
     {
       scale: 300,
-      hex: "#86efac",
-      rgb: "rgb(134,239,172)",
-      hsl: "hsl(141.7,76.6%,73.1%)",
+      hex: '#86efac',
+      rgb: 'rgb(134,239,172)',
+      hsl: 'hsl(141.7,76.6%,73.1%)',
     },
     {
       scale: 400,
-      hex: "#4ade80",
-      rgb: "rgb(74,222,128)",
-      hsl: "hsl(141.9,69.2%,58%)",
+      hex: '#4ade80',
+      rgb: 'rgb(74,222,128)',
+      hsl: 'hsl(141.9,69.2%,58%)',
     },
     {
       scale: 500,
-      hex: "#22c55e",
-      rgb: "rgb(34,197,94)",
-      hsl: "hsl(142.1,70.6%,45.3%)",
+      hex: '#22c55e',
+      rgb: 'rgb(34,197,94)',
+      hsl: 'hsl(142.1,70.6%,45.3%)',
     },
     {
       scale: 600,
-      hex: "#16a34a",
-      rgb: "rgb(22,163,74)",
-      hsl: "hsl(142.1,76.2%,36.3%)",
+      hex: '#16a34a',
+      rgb: 'rgb(22,163,74)',
+      hsl: 'hsl(142.1,76.2%,36.3%)',
     },
     {
       scale: 700,
-      hex: "#15803d",
-      rgb: "rgb(21,128,61)",
-      hsl: "hsl(142.4,71.8%,29.2%)",
+      hex: '#15803d',
+      rgb: 'rgb(21,128,61)',
+      hsl: 'hsl(142.4,71.8%,29.2%)',
     },
     {
       scale: 800,
-      hex: "#166534",
-      rgb: "rgb(22,101,52)",
-      hsl: "hsl(142.8,64.2%,24.1%)",
+      hex: '#166534',
+      rgb: 'rgb(22,101,52)',
+      hsl: 'hsl(142.8,64.2%,24.1%)',
     },
     {
       scale: 900,
-      hex: "#14532d",
-      rgb: "rgb(20,83,45)",
-      hsl: "hsl(143.8,61.2%,20.2%)",
+      hex: '#14532d',
+      rgb: 'rgb(20,83,45)',
+      hsl: 'hsl(143.8,61.2%,20.2%)',
     },
     {
       scale: 950,
-      hex: "#052e16",
-      rgb: "rgb(5,46,22)",
-      hsl: "hsl(144.9,80.4%,10%)",
+      hex: '#052e16',
+      rgb: 'rgb(5,46,22)',
+      hsl: 'hsl(144.9,80.4%,10%)',
     },
   ],
   emerald: [
     {
       scale: 50,
-      hex: "#ecfdf5",
-      rgb: "rgb(236,253,245)",
-      hsl: "hsl(151.8,81%,95.9%)",
+      hex: '#ecfdf5',
+      rgb: 'rgb(236,253,245)',
+      hsl: 'hsl(151.8,81%,95.9%)',
     },
     {
       scale: 100,
-      hex: "#d1fae5",
-      rgb: "rgb(209,250,229)",
-      hsl: "hsl(149.3,80.4%,90%)",
+      hex: '#d1fae5',
+      rgb: 'rgb(209,250,229)',
+      hsl: 'hsl(149.3,80.4%,90%)',
     },
     {
       scale: 200,
-      hex: "#a7f3d0",
-      rgb: "rgb(167,243,208)",
-      hsl: "hsl(152.4,76%,80.4%)",
+      hex: '#a7f3d0',
+      rgb: 'rgb(167,243,208)',
+      hsl: 'hsl(152.4,76%,80.4%)',
     },
     {
       scale: 300,
-      hex: "#6ee7b7",
-      rgb: "rgb(110,231,183)",
-      hsl: "hsl(156.2,71.6%,66.9%)",
+      hex: '#6ee7b7',
+      rgb: 'rgb(110,231,183)',
+      hsl: 'hsl(156.2,71.6%,66.9%)',
     },
     {
       scale: 400,
-      hex: "#34d399",
-      rgb: "rgb(52,211,153)",
-      hsl: "hsl(158.1,64.4%,51.6%)",
+      hex: '#34d399',
+      rgb: 'rgb(52,211,153)',
+      hsl: 'hsl(158.1,64.4%,51.6%)',
     },
     {
       scale: 500,
-      hex: "#10b981",
-      rgb: "rgb(16,185,129)",
-      hsl: "hsl(160.1,84.1%,39.4%)",
+      hex: '#10b981',
+      rgb: 'rgb(16,185,129)',
+      hsl: 'hsl(160.1,84.1%,39.4%)',
     },
     {
       scale: 600,
-      hex: "#059669",
-      rgb: "rgb(5,150,105)",
-      hsl: "hsl(161.4,93.5%,30.4%)",
+      hex: '#059669',
+      rgb: 'rgb(5,150,105)',
+      hsl: 'hsl(161.4,93.5%,30.4%)',
     },
     {
       scale: 700,
-      hex: "#047857",
-      rgb: "rgb(4,120,87)",
-      hsl: "hsl(162.9,93.5%,24.3%)",
+      hex: '#047857',
+      rgb: 'rgb(4,120,87)',
+      hsl: 'hsl(162.9,93.5%,24.3%)',
     },
     {
       scale: 800,
-      hex: "#065f46",
-      rgb: "rgb(6,95,70)",
-      hsl: "hsl(163.1,88.1%,19.8%)",
+      hex: '#065f46',
+      rgb: 'rgb(6,95,70)',
+      hsl: 'hsl(163.1,88.1%,19.8%)',
     },
     {
       scale: 900,
-      hex: "#064e3b",
-      rgb: "rgb(6,78,59)",
-      hsl: "hsl(164.2,85.7%,16.5%)",
+      hex: '#064e3b',
+      rgb: 'rgb(6,78,59)',
+      hsl: 'hsl(164.2,85.7%,16.5%)',
     },
     {
       scale: 950,
-      hex: "#022c22",
-      rgb: "rgb(2,44,34)",
-      hsl: "hsl(165.7,91.3%,9%)",
+      hex: '#022c22',
+      rgb: 'rgb(2,44,34)',
+      hsl: 'hsl(165.7,91.3%,9%)',
     },
   ],
   teal: [
     {
       scale: 50,
-      hex: "#f0fdfa",
-      rgb: "rgb(240,253,250)",
-      hsl: "hsl(166.2,76.5%,96.7%)",
+      hex: '#f0fdfa',
+      rgb: 'rgb(240,253,250)',
+      hsl: 'hsl(166.2,76.5%,96.7%)',
     },
     {
       scale: 100,
-      hex: "#ccfbf1",
-      rgb: "rgb(204,251,241)",
-      hsl: "hsl(167.2,85.5%,89.2%)",
+      hex: '#ccfbf1',
+      rgb: 'rgb(204,251,241)',
+      hsl: 'hsl(167.2,85.5%,89.2%)',
     },
     {
       scale: 200,
-      hex: "#99f6e4",
-      rgb: "rgb(153,246,228)",
-      hsl: "hsl(168.4,83.8%,78.2%)",
+      hex: '#99f6e4',
+      rgb: 'rgb(153,246,228)',
+      hsl: 'hsl(168.4,83.8%,78.2%)',
     },
     {
       scale: 300,
-      hex: "#5eead4",
-      rgb: "rgb(94,234,212)",
-      hsl: "hsl(170.6,76.9%,64.3%)",
+      hex: '#5eead4',
+      rgb: 'rgb(94,234,212)',
+      hsl: 'hsl(170.6,76.9%,64.3%)',
     },
     {
       scale: 400,
-      hex: "#2dd4bf",
-      rgb: "rgb(45,212,191)",
-      hsl: "hsl(172.5,66%,50.4%)",
+      hex: '#2dd4bf',
+      rgb: 'rgb(45,212,191)',
+      hsl: 'hsl(172.5,66%,50.4%)',
     },
     {
       scale: 500,
-      hex: "#14b8a6",
-      rgb: "rgb(20,184,166)",
-      hsl: "hsl(173.4,80.4%,40%)",
+      hex: '#14b8a6',
+      rgb: 'rgb(20,184,166)',
+      hsl: 'hsl(173.4,80.4%,40%)',
     },
     {
       scale: 600,
-      hex: "#0d9488",
-      rgb: "rgb(13,148,136)",
-      hsl: "hsl(174.7,83.9%,31.6%)",
+      hex: '#0d9488',
+      rgb: 'rgb(13,148,136)',
+      hsl: 'hsl(174.7,83.9%,31.6%)',
     },
     {
       scale: 700,
-      hex: "#0f766e",
-      rgb: "rgb(15,118,110)",
-      hsl: "hsl(175.3,77.4%,26.1%)",
+      hex: '#0f766e',
+      rgb: 'rgb(15,118,110)',
+      hsl: 'hsl(175.3,77.4%,26.1%)',
     },
     {
       scale: 800,
-      hex: "#115e59",
-      rgb: "rgb(17,94,89)",
-      hsl: "hsl(176.1,69.4%,21.8%)",
+      hex: '#115e59',
+      rgb: 'rgb(17,94,89)',
+      hsl: 'hsl(176.1,69.4%,21.8%)',
     },
     {
       scale: 900,
-      hex: "#134e4a",
-      rgb: "rgb(19,78,74)",
-      hsl: "hsl(175.9,60.8%,19%)",
+      hex: '#134e4a',
+      rgb: 'rgb(19,78,74)',
+      hsl: 'hsl(175.9,60.8%,19%)',
     },
     {
       scale: 950,
-      hex: "#042f2e",
-      rgb: "rgb(4,47,46)",
-      hsl: "hsl(178.6,84.3%,10%)",
+      hex: '#042f2e',
+      rgb: 'rgb(4,47,46)',
+      hsl: 'hsl(178.6,84.3%,10%)',
     },
   ],
   cyan: [
     {
       scale: 50,
-      hex: "#ecfeff",
-      rgb: "rgb(236,254,255)",
-      hsl: "hsl(183.2,100%,96.3%)",
+      hex: '#ecfeff',
+      rgb: 'rgb(236,254,255)',
+      hsl: 'hsl(183.2,100%,96.3%)',
     },
     {
       scale: 100,
-      hex: "#cffafe",
-      rgb: "rgb(207,250,254)",
-      hsl: "hsl(185.1,95.9%,90.4%)",
+      hex: '#cffafe',
+      rgb: 'rgb(207,250,254)',
+      hsl: 'hsl(185.1,95.9%,90.4%)',
     },
     {
       scale: 200,
-      hex: "#a5f3fc",
-      rgb: "rgb(165,243,252)",
-      hsl: "hsl(186.2,93.5%,81.8%)",
+      hex: '#a5f3fc',
+      rgb: 'rgb(165,243,252)',
+      hsl: 'hsl(186.2,93.5%,81.8%)',
     },
     {
       scale: 300,
-      hex: "#67e8f9",
-      rgb: "rgb(103,232,249)",
-      hsl: "hsl(187,92.4%,69%)",
+      hex: '#67e8f9',
+      rgb: 'rgb(103,232,249)',
+      hsl: 'hsl(187,92.4%,69%)',
     },
     {
       scale: 400,
-      hex: "#22d3ee",
-      rgb: "rgb(34,211,238)",
-      hsl: "hsl(187.9,85.7%,53.3%)",
+      hex: '#22d3ee',
+      rgb: 'rgb(34,211,238)',
+      hsl: 'hsl(187.9,85.7%,53.3%)',
     },
     {
       scale: 500,
-      hex: "#06b6d4",
-      rgb: "rgb(6,182,212)",
-      hsl: "hsl(188.7,94.5%,42.7%)",
+      hex: '#06b6d4',
+      rgb: 'rgb(6,182,212)',
+      hsl: 'hsl(188.7,94.5%,42.7%)',
     },
     {
       scale: 600,
-      hex: "#0891b2",
-      rgb: "rgb(8,145,178)",
-      hsl: "hsl(191.6,91.4%,36.5%)",
+      hex: '#0891b2',
+      rgb: 'rgb(8,145,178)',
+      hsl: 'hsl(191.6,91.4%,36.5%)',
     },
     {
       scale: 700,
-      hex: "#0e7490",
-      rgb: "rgb(14,116,144)",
-      hsl: "hsl(192.9,82.3%,31%)",
+      hex: '#0e7490',
+      rgb: 'rgb(14,116,144)',
+      hsl: 'hsl(192.9,82.3%,31%)',
     },
     {
       scale: 800,
-      hex: "#155e75",
-      rgb: "rgb(21,94,117)",
-      hsl: "hsl(194.4,69.6%,27.1%)",
+      hex: '#155e75',
+      rgb: 'rgb(21,94,117)',
+      hsl: 'hsl(194.4,69.6%,27.1%)',
     },
     {
       scale: 900,
-      hex: "#164e63",
-      rgb: "rgb(22,78,99)",
-      hsl: "hsl(196.4,63.6%,23.7%)",
+      hex: '#164e63',
+      rgb: 'rgb(22,78,99)',
+      hsl: 'hsl(196.4,63.6%,23.7%)',
     },
     {
       scale: 950,
-      hex: "#083344",
-      rgb: "rgb(8,51,68)",
-      hsl: "hsl(197,78.9%,14.9%)",
+      hex: '#083344',
+      rgb: 'rgb(8,51,68)',
+      hsl: 'hsl(197,78.9%,14.9%)',
     },
   ],
   sky: [
     {
       scale: 50,
-      hex: "#f0f9ff",
-      rgb: "rgb(240,249,255)",
-      hsl: "hsl(204,100%,97.1%)",
+      hex: '#f0f9ff',
+      rgb: 'rgb(240,249,255)',
+      hsl: 'hsl(204,100%,97.1%)',
     },
     {
       scale: 100,
-      hex: "#e0f2fe",
-      rgb: "rgb(224,242,254)",
-      hsl: "hsl(204,93.8%,93.7%)",
+      hex: '#e0f2fe',
+      rgb: 'rgb(224,242,254)',
+      hsl: 'hsl(204,93.8%,93.7%)',
     },
     {
       scale: 200,
-      hex: "#bae6fd",
-      rgb: "rgb(186,230,253)",
-      hsl: "hsl(200.6,94.4%,86.1%)",
+      hex: '#bae6fd',
+      rgb: 'rgb(186,230,253)',
+      hsl: 'hsl(200.6,94.4%,86.1%)',
     },
     {
       scale: 300,
-      hex: "#7dd3fc",
-      rgb: "rgb(125,211,252)",
-      hsl: "hsl(199.4,95.5%,73.9%)",
+      hex: '#7dd3fc',
+      rgb: 'rgb(125,211,252)',
+      hsl: 'hsl(199.4,95.5%,73.9%)',
     },
     {
       scale: 400,
-      hex: "#38bdf8",
-      rgb: "rgb(56,189,248)",
-      hsl: "hsl(198.4,93.2%,59.6%)",
+      hex: '#38bdf8',
+      rgb: 'rgb(56,189,248)',
+      hsl: 'hsl(198.4,93.2%,59.6%)',
     },
     {
       scale: 500,
-      hex: "#0ea5e9",
-      rgb: "rgb(14,165,233)",
-      hsl: "hsl(198.6,88.7%,48.4%)",
+      hex: '#0ea5e9',
+      rgb: 'rgb(14,165,233)',
+      hsl: 'hsl(198.6,88.7%,48.4%)',
     },
     {
       scale: 600,
-      hex: "#0284c7",
-      rgb: "rgb(2,132,199)",
-      hsl: "hsl(200.4,98%,39.4%)",
+      hex: '#0284c7',
+      rgb: 'rgb(2,132,199)',
+      hsl: 'hsl(200.4,98%,39.4%)',
     },
     {
       scale: 700,
-      hex: "#0369a1",
-      rgb: "rgb(3,105,161)",
-      hsl: "hsl(201.3,96.3%,32.2%)",
+      hex: '#0369a1',
+      rgb: 'rgb(3,105,161)',
+      hsl: 'hsl(201.3,96.3%,32.2%)',
     },
     {
       scale: 800,
-      hex: "#075985",
-      rgb: "rgb(7,89,133)",
-      hsl: "hsl(201,90%,27.5%)",
+      hex: '#075985',
+      rgb: 'rgb(7,89,133)',
+      hsl: 'hsl(201,90%,27.5%)',
     },
     {
       scale: 900,
-      hex: "#0c4a6e",
-      rgb: "rgb(12,74,110)",
-      hsl: "hsl(202,80.3%,23.9%)",
+      hex: '#0c4a6e',
+      rgb: 'rgb(12,74,110)',
+      hsl: 'hsl(202,80.3%,23.9%)',
     },
     {
       scale: 950,
-      hex: "#082f49",
-      rgb: "rgb(8,47,73)",
-      hsl: "hsl(204,80.2%,15.9%)",
+      hex: '#082f49',
+      rgb: 'rgb(8,47,73)',
+      hsl: 'hsl(204,80.2%,15.9%)',
     },
   ],
   blue: [
     {
       scale: 50,
-      hex: "#eff6ff",
-      rgb: "rgb(239,246,255)",
-      hsl: "hsl(213.8,100%,96.9%)",
+      hex: '#eff6ff',
+      rgb: 'rgb(239,246,255)',
+      hsl: 'hsl(213.8,100%,96.9%)',
     },
     {
       scale: 100,
-      hex: "#dbeafe",
-      rgb: "rgb(219,234,254)",
-      hsl: "hsl(214.3,94.6%,92.7%)",
+      hex: '#dbeafe',
+      rgb: 'rgb(219,234,254)',
+      hsl: 'hsl(214.3,94.6%,92.7%)',
     },
     {
       scale: 200,
-      hex: "#bfdbfe",
-      rgb: "rgb(191,219,254)",
-      hsl: "hsl(213.3,96.9%,87.3%)",
+      hex: '#bfdbfe',
+      rgb: 'rgb(191,219,254)',
+      hsl: 'hsl(213.3,96.9%,87.3%)',
     },
     {
       scale: 300,
-      hex: "#93c5fd",
-      rgb: "rgb(147,197,253)",
-      hsl: "hsl(211.7,96.4%,78.4%)",
+      hex: '#93c5fd',
+      rgb: 'rgb(147,197,253)',
+      hsl: 'hsl(211.7,96.4%,78.4%)',
     },
     {
       scale: 400,
-      hex: "#60a5fa",
-      rgb: "rgb(96,165,250)",
-      hsl: "hsl(213.1,93.9%,67.8%)",
+      hex: '#60a5fa',
+      rgb: 'rgb(96,165,250)',
+      hsl: 'hsl(213.1,93.9%,67.8%)',
     },
     {
       scale: 500,
-      hex: "#3b82f6",
-      rgb: "rgb(59,130,246)",
-      hsl: "hsl(217.2,91.2%,59.8%)",
+      hex: '#3b82f6',
+      rgb: 'rgb(59,130,246)',
+      hsl: 'hsl(217.2,91.2%,59.8%)',
     },
     {
       scale: 600,
-      hex: "#2563eb",
-      rgb: "rgb(37,99,235)",
-      hsl: "hsl(221.2,83.2%,53.3%)",
+      hex: '#2563eb',
+      rgb: 'rgb(37,99,235)',
+      hsl: 'hsl(221.2,83.2%,53.3%)',
     },
     {
       scale: 700,
-      hex: "#1d4ed8",
-      rgb: "rgb(29,78,216)",
-      hsl: "hsl(224.3,76.3%,48%)",
+      hex: '#1d4ed8',
+      rgb: 'rgb(29,78,216)',
+      hsl: 'hsl(224.3,76.3%,48%)',
     },
     {
       scale: 800,
-      hex: "#1e40af",
-      rgb: "rgb(30,64,175)",
-      hsl: "hsl(225.9,70.7%,40.2%)",
+      hex: '#1e40af',
+      rgb: 'rgb(30,64,175)',
+      hsl: 'hsl(225.9,70.7%,40.2%)',
     },
     {
       scale: 900,
-      hex: "#1e3a8a",
-      rgb: "rgb(30,58,138)",
-      hsl: "hsl(224.4,64.3%,32.9%)",
+      hex: '#1e3a8a',
+      rgb: 'rgb(30,58,138)',
+      hsl: 'hsl(224.4,64.3%,32.9%)',
     },
     {
       scale: 950,
-      hex: "#172554",
-      rgb: "rgb(23,37,84)",
-      hsl: "hsl(226.2,57%,21%)",
+      hex: '#172554',
+      rgb: 'rgb(23,37,84)',
+      hsl: 'hsl(226.2,57%,21%)',
     },
   ],
   indigo: [
     {
       scale: 50,
-      hex: "#eef2ff",
-      rgb: "rgb(238,242,255)",
-      hsl: "hsl(225.9,100%,96.7%)",
+      hex: '#eef2ff',
+      rgb: 'rgb(238,242,255)',
+      hsl: 'hsl(225.9,100%,96.7%)',
     },
     {
       scale: 100,
-      hex: "#e0e7ff",
-      rgb: "rgb(224,231,255)",
-      hsl: "hsl(226.5,100%,93.9%)",
+      hex: '#e0e7ff',
+      rgb: 'rgb(224,231,255)',
+      hsl: 'hsl(226.5,100%,93.9%)',
     },
     {
       scale: 200,
-      hex: "#c7d2fe",
-      rgb: "rgb(199,210,254)",
-      hsl: "hsl(228,96.5%,88.8%)",
+      hex: '#c7d2fe',
+      rgb: 'rgb(199,210,254)',
+      hsl: 'hsl(228,96.5%,88.8%)',
     },
     {
       scale: 300,
-      hex: "#a5b4fc",
-      rgb: "rgb(165,180,252)",
-      hsl: "hsl(229.7,93.5%,81.8%)",
+      hex: '#a5b4fc',
+      rgb: 'rgb(165,180,252)',
+      hsl: 'hsl(229.7,93.5%,81.8%)',
     },
     {
       scale: 400,
-      hex: "#818cf8",
-      rgb: "rgb(129,140,248)",
-      hsl: "hsl(234.5,89.5%,73.9%)",
+      hex: '#818cf8',
+      rgb: 'rgb(129,140,248)',
+      hsl: 'hsl(234.5,89.5%,73.9%)',
     },
     {
       scale: 500,
-      hex: "#6366f1",
-      rgb: "rgb(99,102,241)",
-      hsl: "hsl(238.7,83.5%,66.7%)",
+      hex: '#6366f1',
+      rgb: 'rgb(99,102,241)',
+      hsl: 'hsl(238.7,83.5%,66.7%)',
     },
     {
       scale: 600,
-      hex: "#4f46e5",
-      rgb: "rgb(79,70,229)",
-      hsl: "hsl(243.4,75.4%,58.6%)",
+      hex: '#4f46e5',
+      rgb: 'rgb(79,70,229)',
+      hsl: 'hsl(243.4,75.4%,58.6%)',
     },
     {
       scale: 700,
-      hex: "#4338ca",
-      rgb: "rgb(67,56,202)",
-      hsl: "hsl(244.5,57.9%,50.6%)",
+      hex: '#4338ca',
+      rgb: 'rgb(67,56,202)',
+      hsl: 'hsl(244.5,57.9%,50.6%)',
     },
     {
       scale: 800,
-      hex: "#3730a3",
-      rgb: "rgb(55,48,163)",
-      hsl: "hsl(243.7,54.5%,41.4%)",
+      hex: '#3730a3',
+      rgb: 'rgb(55,48,163)',
+      hsl: 'hsl(243.7,54.5%,41.4%)',
     },
     {
       scale: 900,
-      hex: "#312e81",
-      rgb: "rgb(49,46,129)",
-      hsl: "hsl(242.2,47.4%,34.3%)",
+      hex: '#312e81',
+      rgb: 'rgb(49,46,129)',
+      hsl: 'hsl(242.2,47.4%,34.3%)',
     },
     {
       scale: 950,
-      hex: "#1e1b4b",
-      rgb: "rgb(30,27,75)",
-      hsl: "hsl(243.8,47.1%,20%)",
+      hex: '#1e1b4b',
+      rgb: 'rgb(30,27,75)',
+      hsl: 'hsl(243.8,47.1%,20%)',
     },
   ],
   violet: [
     {
       scale: 50,
-      hex: "#f5f3ff",
-      rgb: "rgb(245,243,255)",
-      hsl: "hsl(250,100%,97.6%)",
+      hex: '#f5f3ff',
+      rgb: 'rgb(245,243,255)',
+      hsl: 'hsl(250,100%,97.6%)',
     },
     {
       scale: 100,
-      hex: "#ede9fe",
-      rgb: "rgb(237,233,254)",
-      hsl: "hsl(251.4,91.3%,95.5%)",
+      hex: '#ede9fe',
+      rgb: 'rgb(237,233,254)',
+      hsl: 'hsl(251.4,91.3%,95.5%)',
     },
     {
       scale: 200,
-      hex: "#ddd6fe",
-      rgb: "rgb(221,214,254)",
-      hsl: "hsl(250.5,95.2%,91.8%)",
+      hex: '#ddd6fe',
+      rgb: 'rgb(221,214,254)',
+      hsl: 'hsl(250.5,95.2%,91.8%)',
     },
     {
       scale: 300,
-      hex: "#c4b5fd",
-      rgb: "rgb(196,181,253)",
-      hsl: "hsl(252.5,94.7%,85.1%)",
+      hex: '#c4b5fd',
+      rgb: 'rgb(196,181,253)',
+      hsl: 'hsl(252.5,94.7%,85.1%)',
     },
     {
       scale: 400,
-      hex: "#a78bfa",
-      rgb: "rgb(167,139,250)",
-      hsl: "hsl(255.1,91.7%,76.3%)",
+      hex: '#a78bfa',
+      rgb: 'rgb(167,139,250)',
+      hsl: 'hsl(255.1,91.7%,76.3%)',
     },
     {
       scale: 500,
-      hex: "#8b5cf6",
-      rgb: "rgb(139,92,246)",
-      hsl: "hsl(258.3,89.5%,66.3%)",
+      hex: '#8b5cf6',
+      rgb: 'rgb(139,92,246)',
+      hsl: 'hsl(258.3,89.5%,66.3%)',
     },
     {
       scale: 600,
-      hex: "#7c3aed",
-      rgb: "rgb(124,58,237)",
-      hsl: "hsl(262.1,83.3%,57.8%)",
+      hex: '#7c3aed',
+      rgb: 'rgb(124,58,237)',
+      hsl: 'hsl(262.1,83.3%,57.8%)',
     },
     {
       scale: 700,
-      hex: "#6d28d9",
-      rgb: "rgb(109,40,217)",
-      hsl: "hsl(263.4,70%,50.4%)",
+      hex: '#6d28d9',
+      rgb: 'rgb(109,40,217)',
+      hsl: 'hsl(263.4,70%,50.4%)',
     },
     {
       scale: 800,
-      hex: "#5b21b6",
-      rgb: "rgb(91,33,182)",
-      hsl: "hsl(263.4,69.3%,42.2%)",
+      hex: '#5b21b6',
+      rgb: 'rgb(91,33,182)',
+      hsl: 'hsl(263.4,69.3%,42.2%)',
     },
     {
       scale: 900,
-      hex: "#4c1d95",
-      rgb: "rgb(76,29,149)",
-      hsl: "hsl(263.5,67.4%,34.9%)",
+      hex: '#4c1d95',
+      rgb: 'rgb(76,29,149)',
+      hsl: 'hsl(263.5,67.4%,34.9%)',
     },
     {
       scale: 950,
-      hex: "#1e1b4b",
-      rgb: "rgb(46,16,101)",
-      hsl: "hsl(261.2,72.6%,22.9%)",
+      hex: '#1e1b4b',
+      rgb: 'rgb(46,16,101)',
+      hsl: 'hsl(261.2,72.6%,22.9%)',
     },
   ],
   purple: [
     {
       scale: 50,
-      hex: "#faf5ff",
-      rgb: "rgb(250,245,255)",
-      hsl: "hsl(270,100%,98%)",
+      hex: '#faf5ff',
+      rgb: 'rgb(250,245,255)',
+      hsl: 'hsl(270,100%,98%)',
     },
     {
       scale: 100,
-      hex: "#f3e8ff",
-      rgb: "rgb(243,232,255)",
-      hsl: "hsl(268.7,100%,95.5%)",
+      hex: '#f3e8ff',
+      rgb: 'rgb(243,232,255)',
+      hsl: 'hsl(268.7,100%,95.5%)',
     },
     {
       scale: 200,
-      hex: "#e9d5ff",
-      rgb: "rgb(233,213,255)",
-      hsl: "hsl(268.6,100%,91.8%)",
+      hex: '#e9d5ff',
+      rgb: 'rgb(233,213,255)',
+      hsl: 'hsl(268.6,100%,91.8%)',
     },
     {
       scale: 300,
-      hex: "#d8b4fe",
-      rgb: "rgb(216,180,254)",
-      hsl: "hsl(269.2,97.4%,85.1%)",
+      hex: '#d8b4fe',
+      rgb: 'rgb(216,180,254)',
+      hsl: 'hsl(269.2,97.4%,85.1%)',
     },
     {
       scale: 400,
-      hex: "#c084fc",
-      rgb: "rgb(192,132,252)",
-      hsl: "hsl(270,95.2%,75.3%)",
+      hex: '#c084fc',
+      rgb: 'rgb(192,132,252)',
+      hsl: 'hsl(270,95.2%,75.3%)',
     },
     {
       scale: 500,
-      hex: "#a855f7",
-      rgb: "rgb(168,85,247)",
-      hsl: "hsl(270.7,91%,65.1%)",
+      hex: '#a855f7',
+      rgb: 'rgb(168,85,247)',
+      hsl: 'hsl(270.7,91%,65.1%)',
     },
     {
       scale: 600,
-      hex: "#9333ea",
-      rgb: "rgb(147,51,234)",
-      hsl: "hsl(271.5,81.3%,55.9%)",
+      hex: '#9333ea',
+      rgb: 'rgb(147,51,234)',
+      hsl: 'hsl(271.5,81.3%,55.9%)',
     },
     {
       scale: 700,
-      hex: "#7e22ce",
-      rgb: "rgb(126,34,206)",
-      hsl: "hsl(272.1,71.7%,47.1%)",
+      hex: '#7e22ce',
+      rgb: 'rgb(126,34,206)',
+      hsl: 'hsl(272.1,71.7%,47.1%)',
     },
     {
       scale: 800,
-      hex: "#6b21a8",
-      rgb: "rgb(107,33,168)",
-      hsl: "hsl(272.9,67.2%,39.4%)",
+      hex: '#6b21a8',
+      rgb: 'rgb(107,33,168)',
+      hsl: 'hsl(272.9,67.2%,39.4%)',
     },
     {
       scale: 900,
-      hex: "#581c87",
-      rgb: "rgb(88,28,135)",
-      hsl: "hsl(273.6,65.6%,32%)",
+      hex: '#581c87',
+      rgb: 'rgb(88,28,135)',
+      hsl: 'hsl(273.6,65.6%,32%)',
     },
     {
       scale: 950,
-      hex: "#3b0764",
-      rgb: "rgb(59,7,100)",
-      hsl: "hsl(273.5,86.9%,21%)",
+      hex: '#3b0764',
+      rgb: 'rgb(59,7,100)',
+      hsl: 'hsl(273.5,86.9%,21%)',
     },
   ],
   fuchsia: [
     {
       scale: 50,
-      hex: "#fdf4ff",
-      rgb: "rgb(253,244,255)",
-      hsl: "hsl(289.1,100%,97.8%)",
+      hex: '#fdf4ff',
+      rgb: 'rgb(253,244,255)',
+      hsl: 'hsl(289.1,100%,97.8%)',
     },
     {
       scale: 100,
-      hex: "#fae8ff",
-      rgb: "rgb(250,232,255)",
-      hsl: "hsl(287,100%,95.5%)",
+      hex: '#fae8ff',
+      rgb: 'rgb(250,232,255)',
+      hsl: 'hsl(287,100%,95.5%)',
     },
     {
       scale: 200,
-      hex: "#f5d0fe",
-      rgb: "rgb(245,208,254)",
-      hsl: "hsl(288.3,95.8%,90.6%)",
+      hex: '#f5d0fe',
+      rgb: 'rgb(245,208,254)',
+      hsl: 'hsl(288.3,95.8%,90.6%)',
     },
     {
       scale: 300,
-      hex: "#f0abfc",
-      rgb: "rgb(240,171,252)",
-      hsl: "hsl(291.1,93.1%,82.9%)",
+      hex: '#f0abfc',
+      rgb: 'rgb(240,171,252)',
+      hsl: 'hsl(291.1,93.1%,82.9%)',
     },
     {
       scale: 400,
-      hex: "#e879f9",
-      rgb: "rgb(232,121,249)",
-      hsl: "hsl(292,91.4%,72.5%)",
+      hex: '#e879f9',
+      rgb: 'rgb(232,121,249)',
+      hsl: 'hsl(292,91.4%,72.5%)',
     },
     {
       scale: 500,
-      hex: "#d946ef",
-      rgb: "rgb(217,70,239)",
-      hsl: "hsl(292.2,84.1%,60.6%)",
+      hex: '#d946ef',
+      rgb: 'rgb(217,70,239)',
+      hsl: 'hsl(292.2,84.1%,60.6%)',
     },
     {
       scale: 600,
-      hex: "#c026d3",
-      rgb: "rgb(192,38,211)",
-      hsl: "hsl(293.4,69.5%,48.8%)",
+      hex: '#c026d3',
+      rgb: 'rgb(192,38,211)',
+      hsl: 'hsl(293.4,69.5%,48.8%)',
     },
     {
       scale: 700,
-      hex: "#a21caf",
-      rgb: "rgb(162,28,175)",
-      hsl: "hsl(294.7,72.4%,39.8%)",
+      hex: '#a21caf',
+      rgb: 'rgb(162,28,175)',
+      hsl: 'hsl(294.7,72.4%,39.8%)',
     },
     {
       scale: 800,
-      hex: "#86198f",
-      rgb: "rgb(134,25,143)",
-      hsl: "hsl(295.4,70.2%,32.9%)",
+      hex: '#86198f',
+      rgb: 'rgb(134,25,143)',
+      hsl: 'hsl(295.4,70.2%,32.9%)',
     },
     {
       scale: 900,
-      hex: "#701a75",
-      rgb: "rgb(112,26,117)",
-      hsl: "hsl(296.7,63.6%,28%)",
+      hex: '#701a75',
+      rgb: 'rgb(112,26,117)',
+      hsl: 'hsl(296.7,63.6%,28%)',
     },
     {
       scale: 950,
-      hex: "#4a044e",
-      rgb: "rgb(74,4,78)",
-      hsl: "hsl(296.8,90.2%,16.1%)",
+      hex: '#4a044e',
+      rgb: 'rgb(74,4,78)',
+      hsl: 'hsl(296.8,90.2%,16.1%)',
     },
   ],
   pink: [
     {
       scale: 50,
-      hex: "#fdf2f8",
-      rgb: "rgb(253,242,248)",
-      hsl: "hsl(327.3,73.3%,97.1%)",
+      hex: '#fdf2f8',
+      rgb: 'rgb(253,242,248)',
+      hsl: 'hsl(327.3,73.3%,97.1%)',
     },
     {
       scale: 100,
-      hex: "#fce7f3",
-      rgb: "rgb(252,231,243)",
-      hsl: "hsl(325.7,77.8%,94.7%)",
+      hex: '#fce7f3',
+      rgb: 'rgb(252,231,243)',
+      hsl: 'hsl(325.7,77.8%,94.7%)',
     },
     {
       scale: 200,
-      hex: "#fbcfe8",
-      rgb: "rgb(251,207,232)",
-      hsl: "hsl(325.9,84.6%,89.8%)",
+      hex: '#fbcfe8',
+      rgb: 'rgb(251,207,232)',
+      hsl: 'hsl(325.9,84.6%,89.8%)',
     },
     {
       scale: 300,
-      hex: "#f9a8d4",
-      rgb: "rgb(249,168,212)",
-      hsl: "hsl(327.4,87.1%,81.8%)",
+      hex: '#f9a8d4',
+      rgb: 'rgb(249,168,212)',
+      hsl: 'hsl(327.4,87.1%,81.8%)',
     },
     {
       scale: 400,
-      hex: "#f472b6",
-      rgb: "rgb(244,114,182)",
-      hsl: "hsl(328.6,85.5%,70.2%)",
+      hex: '#f472b6',
+      rgb: 'rgb(244,114,182)',
+      hsl: 'hsl(328.6,85.5%,70.2%)',
     },
     {
       scale: 500,
-      hex: "#ec4899",
-      rgb: "rgb(236,72,153)",
-      hsl: "hsl(330.4,81.2%,60.4%)",
+      hex: '#ec4899',
+      rgb: 'rgb(236,72,153)',
+      hsl: 'hsl(330.4,81.2%,60.4%)',
     },
     {
       scale: 600,
-      hex: "#db2777",
-      rgb: "rgb(219,39,119)",
-      hsl: "hsl(333.3,71.4%,50.6%)",
+      hex: '#db2777',
+      rgb: 'rgb(219,39,119)',
+      hsl: 'hsl(333.3,71.4%,50.6%)',
     },
     {
       scale: 700,
-      hex: "#be185d",
-      rgb: "rgb(190,24,93)",
-      hsl: "hsl(335.1,77.6%,42%)",
+      hex: '#be185d',
+      rgb: 'rgb(190,24,93)',
+      hsl: 'hsl(335.1,77.6%,42%)',
     },
     {
       scale: 800,
-      hex: "#9d174d",
-      rgb: "rgb(157,23,77)",
-      hsl: "hsl(335.8,74.4%,35.3%)",
+      hex: '#9d174d',
+      rgb: 'rgb(157,23,77)',
+      hsl: 'hsl(335.8,74.4%,35.3%)',
     },
     {
       scale: 900,
-      hex: "#831843",
-      rgb: "rgb(131,24,67)",
-      hsl: "hsl(335.9,69%,30.4%)",
+      hex: '#831843',
+      rgb: 'rgb(131,24,67)',
+      hsl: 'hsl(335.9,69%,30.4%)',
     },
     {
       scale: 950,
-      hex: "#500724",
-      rgb: "rgb(80,7,36)",
-      hsl: "hsl(336.2,83.9%,17.1%)",
+      hex: '#500724',
+      rgb: 'rgb(80,7,36)',
+      hsl: 'hsl(336.2,83.9%,17.1%)',
     },
   ],
   rose: [
     {
       scale: 50,
-      hex: "#fff1f2",
-      rgb: "rgb(255,241,242)",
-      hsl: "hsl(355.7,100%,97.3%)",
+      hex: '#fff1f2',
+      rgb: 'rgb(255,241,242)',
+      hsl: 'hsl(355.7,100%,97.3%)',
     },
     {
       scale: 100,
-      hex: "#ffe4e6",
-      rgb: "rgb(255,228,230)",
-      hsl: "hsl(355.6,100%,94.7%)",
+      hex: '#ffe4e6',
+      rgb: 'rgb(255,228,230)',
+      hsl: 'hsl(355.6,100%,94.7%)',
     },
     {
       scale: 200,
-      hex: "#fecdd3",
-      rgb: "rgb(254,205,211)",
-      hsl: "hsl(352.7,96.1%,90%)",
+      hex: '#fecdd3',
+      rgb: 'rgb(254,205,211)',
+      hsl: 'hsl(352.7,96.1%,90%)',
     },
     {
       scale: 300,
-      hex: "#fda4af",
-      rgb: "rgb(253,164,175)",
-      hsl: "hsl(352.6,95.7%,81.8%)",
+      hex: '#fda4af',
+      rgb: 'rgb(253,164,175)',
+      hsl: 'hsl(352.6,95.7%,81.8%)',
     },
     {
       scale: 400,
-      hex: "#fb7185",
-      rgb: "rgb(251,113,133)",
-      hsl: "hsl(351.3,94.5%,71.4%)",
+      hex: '#fb7185',
+      rgb: 'rgb(251,113,133)',
+      hsl: 'hsl(351.3,94.5%,71.4%)',
     },
     {
       scale: 500,
-      hex: "#f43f5e",
-      rgb: "rgb(244,63,94)",
-      hsl: "hsl(349.7,89.2%,60.2%)",
+      hex: '#f43f5e',
+      rgb: 'rgb(244,63,94)',
+      hsl: 'hsl(349.7,89.2%,60.2%)',
     },
     {
       scale: 600,
-      hex: "#e11d48",
-      rgb: "rgb(225,29,72)",
-      hsl: "hsl(346.8,77.2%,49.8%)",
+      hex: '#e11d48',
+      rgb: 'rgb(225,29,72)',
+      hsl: 'hsl(346.8,77.2%,49.8%)',
     },
     {
       scale: 700,
-      hex: "#be123c",
-      rgb: "rgb(190,18,60)",
-      hsl: "hsl(345.3,82.7%,40.8%)",
+      hex: '#be123c',
+      rgb: 'rgb(190,18,60)',
+      hsl: 'hsl(345.3,82.7%,40.8%)',
     },
     {
       scale: 800,
-      hex: "#9f1239",
-      rgb: "rgb(159,18,57)",
-      hsl: "hsl(343.4,79.7%,34.7%)",
+      hex: '#9f1239',
+      rgb: 'rgb(159,18,57)',
+      hsl: 'hsl(343.4,79.7%,34.7%)',
     },
     {
       scale: 900,
-      hex: "#881337",
-      rgb: "rgb(136,19,55)",
-      hsl: "hsl(341.5,75.5%,30.4%)",
+      hex: '#881337',
+      rgb: 'rgb(136,19,55)',
+      hsl: 'hsl(341.5,75.5%,30.4%)',
     },
     {
       scale: 950,
-      hex: "#4c0519",
-      rgb: "rgb(76,5,25)",
-      hsl: "hsl(343.1,87.7%,15.9%)",
+      hex: '#4c0519',
+      rgb: 'rgb(76,5,25)',
+      hsl: 'hsl(343.1,87.7%,15.9%)',
     },
   ],
 }
 
 export const colorMapping = {
   light: {
-    background: "white",
-    foreground: "{{base}}-950",
-    card: "white",
-    "card-foreground": "{{base}}-950",
-    popover: "white",
-    "popover-foreground": "{{base}}-950",
-    primary: "{{base}}-900",
-    "primary-foreground": "{{base}}-50",
-    secondary: "{{base}}-100",
-    "secondary-foreground": "{{base}}-900",
-    muted: "{{base}}-100",
-    "muted-foreground": "{{base}}-500",
-    accent: "{{base}}-100",
-    "accent-foreground": "{{base}}-900",
-    destructive: "red-500",
-    "destructive-foreground": "{{base}}-50",
-    border: "{{base}}-200",
-    input: "{{base}}-200",
-    ring: "{{base}}-950",
-    "chart-1": "12 76% 61%",
-    "chart-2": "173 58% 39%",
-    "chart-3": "197 37% 24%",
-    "chart-4": "43 74% 66%",
-    "chart-5": "27 87% 67%",
+    background: 'white',
+    foreground: '{{base}}-950',
+    card: 'white',
+    'card-foreground': '{{base}}-950',
+    popover: 'white',
+    'popover-foreground': '{{base}}-950',
+    primary: '{{base}}-900',
+    'primary-foreground': '{{base}}-50',
+    secondary: '{{base}}-100',
+    'secondary-foreground': '{{base}}-900',
+    muted: '{{base}}-100',
+    'muted-foreground': '{{base}}-500',
+    accent: '{{base}}-100',
+    'accent-foreground': '{{base}}-900',
+    destructive: 'red-500',
+    'destructive-foreground': '{{base}}-50',
+    border: '{{base}}-200',
+    input: '{{base}}-200',
+    ring: '{{base}}-950',
+    'chart-1': '12 76% 61%',
+    'chart-2': '173 58% 39%',
+    'chart-3': '197 37% 24%',
+    'chart-4': '43 74% 66%',
+    'chart-5': '27 87% 67%',
   },
   dark: {
-    background: "{{base}}-950",
-    foreground: "{{base}}-50",
-    card: "{{base}}-950",
-    "card-foreground": "{{base}}-50",
-    popover: "{{base}}-950",
-    "popover-foreground": "{{base}}-50",
-    primary: "{{base}}-50",
-    "primary-foreground": "{{base}}-900",
-    secondary: "{{base}}-800",
-    "secondary-foreground": "{{base}}-50",
-    muted: "{{base}}-800",
-    "muted-foreground": "{{base}}-400",
-    accent: "{{base}}-800",
-    "accent-foreground": "{{base}}-50",
-    destructive: "red-900",
-    "destructive-foreground": "{{base}}-50",
-    border: "{{base}}-800",
-    input: "{{base}}-800",
-    ring: "{{base}}-300",
-    "chart-1": "220 70% 50%",
-    "chart-2": "160 60% 45%",
-    "chart-3": "30 80% 55%",
-    "chart-4": "280 65% 60%",
-    "chart-5": "340 75% 55%",
+    background: '{{base}}-950',
+    foreground: '{{base}}-50',
+    card: '{{base}}-950',
+    'card-foreground': '{{base}}-50',
+    popover: '{{base}}-950',
+    'popover-foreground': '{{base}}-50',
+    primary: '{{base}}-50',
+    'primary-foreground': '{{base}}-900',
+    secondary: '{{base}}-800',
+    'secondary-foreground': '{{base}}-50',
+    muted: '{{base}}-800',
+    'muted-foreground': '{{base}}-400',
+    accent: '{{base}}-800',
+    'accent-foreground': '{{base}}-50',
+    destructive: 'red-900',
+    'destructive-foreground': '{{base}}-50',
+    border: '{{base}}-800',
+    input: '{{base}}-800',
+    ring: '{{base}}-300',
+    'chart-1': '220 70% 50%',
+    'chart-2': '160 60% 45%',
+    'chart-3': '30 80% 55%',
+    'chart-4': '280 65% 60%',
+    'chart-5': '340 75% 55%',
   },
 } as const
diff --git a/docs/www/registry/default/example/DuckButtonAdvancedDemo.tsx b/docs/www/registry/default/example/DuckButtonAdvancedDemo.tsx
index 6890d86..ff5c084 100644
--- a/docs/www/registry/default/example/DuckButtonAdvancedDemo.tsx
+++ b/docs/www/registry/default/example/DuckButtonAdvancedDemo.tsx
@@ -6,7 +6,9 @@ import { useAtom } from 'jotai'
 import { duckButtonVarieties } from '@/hooks/use-varieties'
 
 export default function ButtonAdvancedDemo() {
+  //NOTE: that's a state in the example
   const [variety] = useAtom(duckButtonVarieties)
+  //NOTE: you will use your own variables not this satate in the example
   const { size, open, label, variant, title, commandLabel, command } = variety.default.variety!
 
   return (
diff --git a/docs/www/registry/default/example/DuckButtonMainDemo.tsx b/docs/www/registry/default/example/DuckButtonMainDemo.tsx
index 1bb9788..0f70a21 100644
--- a/docs/www/registry/default/example/DuckButtonMainDemo.tsx
+++ b/docs/www/registry/default/example/DuckButtonMainDemo.tsx
@@ -5,7 +5,9 @@ import { duckButtonVarieties } from '@/hooks/use-varieties'
 import { useAtom } from 'jotai'
 
 export default function ButtonMainDemo() {
+  //NOTE: that's a state in the example
   const [variety] = useAtom(duckButtonVarieties)
+  //NOTE: you will use your own variables not this satate in the example
   const { size, open, label, variant, title } = variety.default.variety!
 
   return (
diff --git a/docs/www/registry/default/example/DuckButtonSimpleDemo.tsx b/docs/www/registry/default/example/DuckButtonSimpleDemo.tsx
index f2dc504..d9b155e 100644
--- a/docs/www/registry/default/example/DuckButtonSimpleDemo.tsx
+++ b/docs/www/registry/default/example/DuckButtonSimpleDemo.tsx
@@ -5,7 +5,9 @@ import { useAtom } from 'jotai'
 import { duckButtonVarieties } from '@/hooks/use-varieties'
 
 export default function ButtonSimpleDemo() {
+  //NOTE: that's a state in the example
   const [variety] = useAtom(duckButtonVarieties)
+  //NOTE: you will use your own variables not this satate in the example
   const { size, open, label, variant, title } = variety.default.variety!
 
   return (
diff --git a/docs/www/registry/default/example/cards/index.tsx b/docs/www/registry/default/example/cards/index.tsx
index 888fa37..d9308d9 100644
--- a/docs/www/registry/default/example/cards/index.tsx
+++ b/docs/www/registry/default/example/cards/index.tsx
@@ -1,15 +1,15 @@
-import { CardsActivityGoal } from "@/registry/default/example/cards/activity-goal"
-import { CardsCalendar } from "@/registry/default/example/cards/calendar"
-import { CardsChat } from "@/registry/default/example/cards/chat"
-import { CardsCookieSettings } from "@/registry/default/example/cards/cookie-settings"
-import { CardsCreateAccount } from "@/registry/default/example/cards/create-account"
-import { CardsDataTable } from "@/registry/default/example/cards/data-table"
-import { CardsMetric } from "@/registry/default/example/cards/metric"
-import { CardsPaymentMethod } from "@/registry/default/example/cards/payment-method"
-import { CardsReportIssue } from "@/registry/default/example/cards/report-issue"
-import { CardsShare } from "@/registry/default/example/cards/share"
-import { CardsStats } from "@/registry/default/example/cards/stats"
-import { CardsTeamMembers } from "@/registry/default/example/cards/team-members"
+import { CardsActivityGoal } from '@/registry/default/example/cards/activity-goal'
+import { CardsCalendar } from '@/registry/default/example/cards/calendar'
+import { CardsChat } from '@/registry/default/example/cards/chat'
+import { CardsCookieSettings } from '@/registry/default/example/cards/cookie-settings'
+import { CardsCreateAccount } from '@/registry/default/example/cards/create-account'
+import { CardsDataTable } from '@/registry/default/example/cards/data-table'
+import { CardsMetric } from '@/registry/default/example/cards/metric'
+import { CardsPaymentMethod } from '@/registry/default/example/cards/payment-method'
+import { CardsReportIssue } from '@/registry/default/example/cards/report-issue'
+import { CardsShare } from '@/registry/default/example/cards/share'
+import { CardsStats } from '@/registry/default/example/cards/stats'
+import { CardsTeamMembers } from '@/registry/default/example/cards/team-members'
 
 export default function CardsDemo() {
   return (
diff --git a/docs/www/registry/default/ui/DuckButton.tsx b/docs/www/registry/default/ui/DuckButton.tsx
new file mode 100644
index 0000000..37b16ae
--- /dev/null
+++ b/docs/www/registry/default/ui/DuckButton.tsx
@@ -0,0 +1,135 @@
+import React from 'react'
+import { cn } from '@/lib'
+import { Slot } from '@radix-ui/react-slot'
+import { cva } from 'class-variance-authority'
+import { VariantProps } from 'class-variance-authority'
+import { LucideIcon } from 'lucide-react'
+import { Badge, CommandShortcut, Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/ui'
+
+export interface DuckButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+  isCollapsed?: boolean
+  icon?: LucideIcon
+  label?: string
+  route?: string
+  command?: CommandType
+  delayDuration?: number
+}
+
+export type CommandType = {
+  label: string
+  key: string
+  state?: unknown
+  action?: <T>(arg?: T) => void
+}
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+const DuckButton = React.forwardRef<HTMLButtonElement, DuckButtonProps>(
+  (
+    {
+      asChild,
+      isCollapsed = false,
+      size = 'default',
+      variant = 'default',
+      title,
+      className,
+      label,
+      children,
+      icon: Icon,
+      delayDuration = 0,
+      command,
+      ...props
+    }: DuckButtonProps,
+    ref: React.ForwardedRef<HTMLButtonElement> | undefined,
+  ) => {
+    const Component = asChild ? Slot : 'button'
+
+    // Handle keyboard shortcuts
+    React.useEffect(() => {
+      if (command?.key) {
+        const handleKeyDown = (e: KeyboardEvent) => {
+          if (e.key === command.key && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault()
+            command.action && command.action()
+          }
+        }
+
+        document.addEventListener('keydown', handleKeyDown)
+        return () => document.removeEventListener('keydown', handleKeyDown)
+      }
+    }, [command])
+
+    console.log(size)
+
+    return (
+      <Tooltip delayDuration={delayDuration}>
+        <TooltipTrigger asChild>
+          <Component
+            ref={ref}
+            className={cn(
+              buttonVariants({
+                variant: variant || 'ghost',
+                size: size ? size : isCollapsed ? 'icon' : 'default',
+                className: cn(
+                  !isCollapsed && 'flex items-center gap-2 justify-start w-[220px] h-[40px]',
+                  !isCollapsed && size === 'icon' && 'px-4',
+                  className,
+                ),
+              }),
+            )}
+            {...props}
+          >
+            {!!Icon && <Icon className="w-[1.15rem] h-[1.15rem]" />}
+            {!isCollapsed && (children || title) && <span className="text-[.9rem]">{children || title}</span>}
+            {!isCollapsed && command && <CommandShortcut className="text-[.8rem]">{command.label}</CommandShortcut>}
+            {!isCollapsed && label && <span className="ml-auto text-[.9rem]">{label}</span>}
+          </Component>
+        </TooltipTrigger>
+        {isCollapsed && (title || label) && (
+          <TooltipContent
+            side="right"
+            className="flex items-center gap-4 z-50 justify-start"
+          >
+            {title}
+            {command && (
+              <CommandShortcut className="text-[.8rem]">
+                <Badge className="p-0 px-2">{command.label}</Badge>
+              </CommandShortcut>
+            )}
+            {label && <span className="ml-auto text-muted-foreground text-[.9rem]">{label}</span>}
+          </TooltipContent>
+        )}
+      </Tooltip>
+    )
+  },
+)
+DuckButton.displayName = 'DuckButton'
+
+export { DuckButton, buttonVariants }
diff --git a/docs/www/registry/default/ui/DuckUI/DuckButton/DuckButton.tsx b/docs/www/registry/default/ui/DuckUI/DuckButton/DuckButton.tsx
deleted file mode 100644
index 1c7b923..0000000
--- a/docs/www/registry/default/ui/DuckUI/DuckButton/DuckButton.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { ForwardedRef } from 'react'
-import { Button, CommandShortcut, Tooltip, TooltipContent, TooltipTrigger } from '@/registry/default/ui/'
-import { DuckButtonProps } from './DuckButton.types'
-import { cn, filteredObject } from '@/lib/'
-
-export const DuckButton = React.forwardRef(
-  (
-    { button, isCollapsed = false, delayDuration = 0, command }: DuckButtonProps,
-    ref: ForwardedRef<HTMLButtonElement> | undefined,
-  ) => {
-    const filteredKeys = filteredObject(['icon', 'className', 'isCollabsed'], button)
-
-    if (command && command.key) {
-      React.useEffect(() => {
-        const down = (e: KeyboardEvent) => {
-          if (e.key === command.key && (e.metaKey || e.ctrlKey)) {
-            e.preventDefault()
-            command.action && command.action()
-          }
-        }
-        document.addEventListener('keydown', down)
-        return () => document.removeEventListener('keydown', down)
-      }, [command.state])
-    }
-
-    return (
-      <Tooltip delayDuration={delayDuration}>
-        <TooltipTrigger asChild>
-          <Button
-            ref={ref}
-            variant={button.variant || 'ghost'}
-            size={button.size || isCollapsed ? 'icon' : 'default'}
-            onClick={button.onClick}
-            className={cn(!isCollapsed && 'flex items-center gap-2 justify-start w-[250px] h-[40px]', button.className)}
-            {...filteredKeys}
-          >
-            {button.icon && <button.icon className="w-[1.15rem] h-[1.15rem]" />}
-            {!isCollapsed && button.title && <span className={'text-[.9rem]'}> {button.title} </span>}
-            {!isCollapsed && command && <CommandShortcut className="text-[.8rem]">{command.label}</CommandShortcut>}
-            {!isCollapsed && button.label && <span className={cn('ml-auto text-[.9rem]')}> {button.label} </span>}
-          </Button>
-        </TooltipTrigger>
-        {isCollapsed && (button.title || button.label) && (
-          <TooltipContent
-            side="right"
-            className="flex items-center gap-4 z-50 justify-start"
-          >
-            {button.title}
-            {command && <CommandShortcut className="text-[.9rem]">{command.label}</CommandShortcut>}
-            {button.label && <span className="ml-auto text-muted-foreground "> {button.label} </span>}
-          </TooltipContent>
-        )}
-      </Tooltip>
-    )
-  },
-)
diff --git a/docs/www/registry/default/ui/DuckUI/DuckButton/DuckButton.types.ts b/docs/www/registry/default/ui/DuckUI/DuckButton/DuckButton.types.ts
deleted file mode 100644
index cdc2f97..0000000
--- a/docs/www/registry/default/ui/DuckUI/DuckButton/DuckButton.types.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ButtonProps } from '@/ui'
-import { Inbox } from 'lucide-react'
-
-export type DuckButtonProps = {
-  button: TooltipButton
-  isCollapsed?: boolean
-  delayDuration?: number
-  command?: CommandType
-}
-
-export type CommandType = {
-  label: string
-  key: string
-  state?: unknown
-  action?: <T>(arg?: T) => void
-}
-
-export type TooltipButton = ButtonProps &
-  React.RefAttributes<HTMLButtonElement> & {
-    icon: typeof Inbox
-    title?: string | JSX.Element
-    label?: string
-    route?: string
-  }
diff --git a/docs/www/registry/default/ui/DuckUI/DuckButton/index.ts b/docs/www/registry/default/ui/DuckUI/DuckButton/index.ts
deleted file mode 100644
index 6cd58b0..0000000
--- a/docs/www/registry/default/ui/DuckUI/DuckButton/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './DuckButton'
-export * from './DuckButton.types'
diff --git a/docs/www/registry/default/ui/DuckUI/DuckNavGroup/DuckNavGroup.tsx b/docs/www/registry/default/ui/DuckUI/DuckNavGroup/DuckNavGroup.tsx
index f9f600d..9ea54b7 100644
--- a/docs/www/registry/default/ui/DuckUI/DuckNavGroup/DuckNavGroup.tsx
+++ b/docs/www/registry/default/ui/DuckUI/DuckNavGroup/DuckNavGroup.tsx
@@ -31,7 +31,7 @@ export const DuckNavGroup = <T extends boolean>({ navigationKeys, nav }: DuckNav
                         ...key.button,
                         className: cn(
                           nav.pathname === key.button.route &&
-                          'bg-primary text-white hover:bg-primary/90 hover:text-white h-10',
+                            'bg-primary text-white hover:bg-primary/90 hover:text-white h-10',
                           key.button.className,
                         ),
                         onClick: () => nav.router.push(key.button.route || ''),
diff --git a/docs/www/registry/default/ui/DuckUI/index.ts b/docs/www/registry/default/ui/DuckUI/index.ts
index bc3e1bc..bad4f14 100644
--- a/docs/www/registry/default/ui/DuckUI/index.ts
+++ b/docs/www/registry/default/ui/DuckUI/index.ts
@@ -1,2 +1 @@
-// export * from './DuckButton'
 export * from './index.types'
diff --git a/docs/www/registry/default/ui/ShadcnUI/accordion.tsx b/docs/www/registry/default/ui/ShadcnUI/accordion.tsx
index 24c788c..b69428b 100644
--- a/docs/www/registry/default/ui/ShadcnUI/accordion.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/accordion.tsx
@@ -1,10 +1,10 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDown } from 'lucide-react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Accordion = AccordionPrimitive.Root
 
@@ -14,11 +14,11 @@ const AccordionItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AccordionPrimitive.Item
     ref={ref}
-    className={cn("border-b", className)}
+    className={cn('border-b', className)}
     {...props}
   />
 ))
-AccordionItem.displayName = "AccordionItem"
+AccordionItem.displayName = 'AccordionItem'
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
@@ -28,8 +28,8 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className,
       )}
       {...props}
     >
@@ -49,7 +49,7 @@ const AccordionContent = React.forwardRef<
     className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
   </AccordionPrimitive.Content>
 ))
 
diff --git a/docs/www/registry/default/ui/ShadcnUI/alert-dialog.tsx b/docs/www/registry/default/ui/ShadcnUI/alert-dialog.tsx
index ef32811..5f67bd9 100644
--- a/docs/www/registry/default/ui/ShadcnUI/alert-dialog.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/alert-dialog.tsx
@@ -1,10 +1,10 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
 
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/registry/default/ui/"
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/default/ui/'
 
 const AlertDialog = AlertDialogPrimitive.Root
 
@@ -18,8 +18,8 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
     )}
     {...props}
     ref={ref}
@@ -36,8 +36,8 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
       )}
       {...props}
     />
@@ -45,33 +45,21 @@ const AlertDialogContent = React.forwardRef<
 ))
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
+    className={cn('flex flex-col space-y-2 text-center sm:text-left', className)}
     {...props}
   />
 )
-AlertDialogHeader.displayName = "AlertDialogHeader"
+AlertDialogHeader.displayName = 'AlertDialogHeader'
 
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
     {...props}
   />
 )
-AlertDialogFooter.displayName = "AlertDialogFooter"
+AlertDialogFooter.displayName = 'AlertDialogFooter'
 
 const AlertDialogTitle = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Title>,
@@ -79,7 +67,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold", className)}
+    className={cn('text-lg font-semibold', className)}
     {...props}
   />
 ))
@@ -91,12 +79,11 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
 ))
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName
 
 const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
@@ -116,11 +103,7 @@ const AlertDialogCancel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Cancel
     ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    )}
+    className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
     {...props}
   />
 ))
diff --git a/docs/www/registry/default/ui/ShadcnUI/alert.tsx b/docs/www/registry/default/ui/ShadcnUI/alert.tsx
index 41fa7e0..3a234e6 100644
--- a/docs/www/registry/default/ui/ShadcnUI/alert.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/alert.tsx
@@ -1,22 +1,21 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
-        destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+        default: 'bg-background text-foreground',
+        destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
-  }
+  },
 )
 
 const Alert = React.forwardRef<
@@ -30,30 +29,28 @@ const Alert = React.forwardRef<
     {...props}
   />
 ))
-Alert.displayName = "Alert"
+Alert.displayName = 'Alert'
 
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-AlertTitle.displayName = "AlertTitle"
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5
+      ref={ref}
+      className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+      {...props}
+    />
+  ),
+)
+AlertTitle.displayName = 'AlertTitle'
 
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
-))
-AlertDescription.displayName = "AlertDescription"
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('text-sm [&_p]:leading-relaxed', className)}
+      {...props}
+    />
+  ),
+)
+AlertDescription.displayName = 'AlertDescription'
 
 export { Alert, AlertTitle, AlertDescription }
diff --git a/docs/www/registry/default/ui/ShadcnUI/aspect-ratio.tsx b/docs/www/registry/default/ui/ShadcnUI/aspect-ratio.tsx
index d6a5226..794c6f4 100644
--- a/docs/www/registry/default/ui/ShadcnUI/aspect-ratio.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/aspect-ratio.tsx
@@ -1,6 +1,6 @@
-"use client"
+'use client'
 
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
 
 const AspectRatio = AspectRatioPrimitive.Root
 
diff --git a/docs/www/registry/default/ui/ShadcnUI/avatar.tsx b/docs/www/registry/default/ui/ShadcnUI/avatar.tsx
index 51e507b..e07a7cc 100644
--- a/docs/www/registry/default/ui/ShadcnUI/avatar.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/avatar.tsx
@@ -1,9 +1,9 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -11,10 +11,7 @@ const Avatar = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
-    )}
+    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
     {...props}
   />
 ))
@@ -26,7 +23,7 @@ const AvatarImage = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
+    className={cn('aspect-square h-full w-full', className)}
     {...props}
   />
 ))
@@ -38,10 +35,7 @@ const AvatarFallback = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Fallback
     ref={ref}
-    className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
-    )}
+    className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
     {...props}
   />
 ))
diff --git a/docs/www/registry/default/ui/ShadcnUI/badge.tsx b/docs/www/registry/default/ui/ShadcnUI/badge.tsx
index f000e3e..da756c6 100644
--- a/docs/www/registry/default/ui/ShadcnUI/badge.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/badge.tsx
@@ -1,35 +1,33 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
+        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
-  }
+  },
 )
 
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+    <div
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
   )
 }
 
diff --git a/docs/www/registry/default/ui/ShadcnUI/breadcrumb.tsx b/docs/www/registry/default/ui/ShadcnUI/breadcrumb.tsx
index 71a5c32..1fae3b8 100644
--- a/docs/www/registry/default/ui/ShadcnUI/breadcrumb.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/breadcrumb.tsx
@@ -1,108 +1,104 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { ChevronRight, MoreHorizontal } from 'lucide-react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Breadcrumb = React.forwardRef<
   HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
+  React.ComponentPropsWithoutRef<'nav'> & {
     separator?: React.ReactNode
   }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = "Breadcrumb"
-
-const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.ComponentPropsWithoutRef<"ol">
->(({ className, ...props }, ref) => (
-  <ol
+>(({ ...props }, ref) => (
+  <nav
     ref={ref}
-    className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className
-    )}
+    aria-label="breadcrumb"
     {...props}
   />
 ))
-BreadcrumbList.displayName = "BreadcrumbList"
+Breadcrumb.displayName = 'Breadcrumb'
 
-const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentPropsWithoutRef<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
-    {...props}
-  />
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={cn(
+        'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+BreadcrumbList.displayName = 'BreadcrumbList'
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(
+  ({ className, ...props }, ref) => (
+    <li
+      ref={ref}
+      className={cn('inline-flex items-center gap-1.5', className)}
+      {...props}
+    />
+  ),
+)
+BreadcrumbItem.displayName = 'BreadcrumbItem'
 
 const BreadcrumbLink = React.forwardRef<
   HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
+  React.ComponentPropsWithoutRef<'a'> & {
     asChild?: boolean
   }
 >(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
+  const Comp = asChild ? Slot : 'a'
 
   return (
     <Comp
       ref={ref}
-      className={cn("transition-colors hover:text-foreground", className)}
+      className={cn('transition-colors hover:text-foreground', className)}
       {...props}
     />
   )
 })
-BreadcrumbLink.displayName = "BreadcrumbLink"
+BreadcrumbLink.displayName = 'BreadcrumbLink'
 
-const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
->(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn("font-normal text-foreground", className)}
-    {...props}
-  />
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('font-normal text-foreground', className)}
+      {...props}
+    />
+  ),
+)
+BreadcrumbPage.displayName = 'BreadcrumbPage'
 
-const BreadcrumbSeparator = ({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">) => (
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<'li'>) => (
   <li
     role="presentation"
     aria-hidden="true"
-    className={cn("[&>svg]:size-3.5", className)}
+    className={cn('[&>svg]:size-3.5', className)}
     {...props}
   >
     {children ?? <ChevronRight />}
   </li>
 )
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'
 
-const BreadcrumbEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
   <span
     role="presentation"
     aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
     {...props}
   >
     <MoreHorizontal className="h-4 w-4" />
     <span className="sr-only">More</span>
   </span>
 )
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis'
 
 export {
   Breadcrumb,
diff --git a/docs/www/registry/default/ui/ShadcnUI/calendar.tsx b/docs/www/registry/default/ui/ShadcnUI/calendar.tsx
index 7eba435..17f82f7 100644
--- a/docs/www/registry/default/ui/ShadcnUI/calendar.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/calendar.tsx
@@ -1,56 +1,46 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-import { DayPicker } from "react-day-picker"
+import * as React from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { DayPicker } from 'react-day-picker'
 
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/registry/default/ui/"
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/registry/default/ui/'
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>
 
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: CalendarProps) {
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
+      className={cn('p-3', className)}
       classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
+        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+        month: 'space-y-4',
+        caption: 'flex justify-center pt-1 relative items-center',
+        caption_label: 'text-sm font-medium',
+        nav: 'space-x-1 flex items-center',
         nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
-        day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
-        ),
-        day_range_end: "day-range-end",
+        nav_button_previous: 'absolute left-1',
+        nav_button_next: 'absolute right-1',
+        table: 'w-full border-collapse space-y-1',
+        head_row: 'flex',
+        head_cell: 'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
+        row: 'flex w-full mt-2',
+        cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
+        day: cn(buttonVariants({ variant: 'ghost' }), 'h-9 w-9 p-0 font-normal aria-selected:opacity-100'),
+        day_range_end: 'day-range-end',
         day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+        day_today: 'bg-accent text-accent-foreground',
         day_outside:
-          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+          'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
+        day_disabled: 'text-muted-foreground opacity-50',
+        day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        day_hidden: 'invisible',
         ...classNames,
       }}
       components={{
@@ -61,6 +51,6 @@ function Calendar({
     />
   )
 }
-Calendar.displayName = "Calendar"
+Calendar.displayName = 'Calendar'
 
 export { Calendar }
diff --git a/docs/www/registry/default/ui/ShadcnUI/card.tsx b/docs/www/registry/default/ui/ShadcnUI/card.tsx
index afa13ec..9aa98dd 100644
--- a/docs/www/registry/default/ui/ShadcnUI/card.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/card.tsx
@@ -1,79 +1,69 @@
-import * as React from "react"
+import * as React from 'react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
-    )}
+    className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
     {...props}
   />
 ))
-Card.displayName = "Card"
+Card.displayName = 'Card'
 
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex flex-col space-y-1.5 p-6', className)}
+      {...props}
+    />
+  ),
+)
+CardHeader.displayName = 'CardHeader'
 
-const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-CardTitle.displayName = "CardTitle"
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  ),
+)
+CardTitle.displayName = 'CardTitle'
 
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p
+      ref={ref}
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  ),
+)
+CardDescription.displayName = 'CardDescription'
 
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('p-6 pt-0', className)}
+      {...props}
+    />
+  ),
+)
+CardContent.displayName = 'CardContent'
 
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex items-center p-6 pt-0', className)}
+      {...props}
+    />
+  ),
+)
+CardFooter.displayName = 'CardFooter'
 
 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/docs/www/registry/default/ui/ShadcnUI/carousel.tsx b/docs/www/registry/default/ui/ShadcnUI/carousel.tsx
index 5fa6770..2097177 100644
--- a/docs/www/registry/default/ui/ShadcnUI/carousel.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/carousel.tsx
@@ -1,13 +1,11 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
+import * as React from 'react'
+import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
+import { ArrowLeft, ArrowRight } from 'lucide-react'
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/default/ui/"
+import { cn } from '@/lib/utils'
+import { Button } from '@/registry/default/ui/'
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
@@ -17,7 +15,7 @@ type CarouselPlugin = UseCarouselParameters[1]
 type CarouselProps = {
   opts?: CarouselOptions
   plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
+  orientation?: 'horizontal' | 'vertical'
   setApi?: (api: CarouselApi) => void
 }
 
@@ -36,34 +34,20 @@ function useCarousel() {
   const context = React.useContext(CarouselContext)
 
   if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
+    throw new Error('useCarousel must be used within a <Carousel />')
   }
 
   return context
 }
 
-const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
-    {
-      orientation = "horizontal",
-      opts,
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
+const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(
+  ({ orientation = 'horizontal', opts, setApi, plugins, className, children, ...props }, ref) => {
     const [carouselRef, api] = useEmblaCarousel(
       {
         ...opts,
-        axis: orientation === "horizontal" ? "x" : "y",
+        axis: orientation === 'horizontal' ? 'x' : 'y',
       },
-      plugins
+      plugins,
     )
     const [canScrollPrev, setCanScrollPrev] = React.useState(false)
     const [canScrollNext, setCanScrollNext] = React.useState(false)
@@ -87,15 +71,15 @@ const Carousel = React.forwardRef<
 
     const handleKeyDown = React.useCallback(
       (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === "ArrowLeft") {
+        if (event.key === 'ArrowLeft') {
           event.preventDefault()
           scrollPrev()
-        } else if (event.key === "ArrowRight") {
+        } else if (event.key === 'ArrowRight') {
           event.preventDefault()
           scrollNext()
         }
       },
-      [scrollPrev, scrollNext]
+      [scrollPrev, scrollNext],
     )
 
     React.useEffect(() => {
@@ -112,11 +96,11 @@ const Carousel = React.forwardRef<
       }
 
       onSelect(api)
-      api.on("reInit", onSelect)
-      api.on("select", onSelect)
+      api.on('reInit', onSelect)
+      api.on('select', onSelect)
 
       return () => {
-        api?.off("select", onSelect)
+        api?.off('select', onSelect)
       }
     }, [api, onSelect])
 
@@ -126,8 +110,7 @@ const Carousel = React.forwardRef<
           carouselRef,
           api: api,
           opts,
-          orientation:
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
           scrollPrev,
           scrollNext,
           canScrollPrev,
@@ -137,7 +120,7 @@ const Carousel = React.forwardRef<
         <div
           ref={ref}
           onKeyDownCapture={handleKeyDown}
-          className={cn("relative", className)}
+          className={cn('relative', className)}
           role="region"
           aria-roledescription="carousel"
           {...props}
@@ -146,117 +129,101 @@ const Carousel = React.forwardRef<
         </div>
       </CarouselContext.Provider>
     )
-  }
+  },
 )
-Carousel.displayName = "Carousel"
+Carousel.displayName = 'Carousel'
 
-const CarouselContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel()
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel()
 
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
+    return (
+      <div
+        ref={carouselRef}
+        className="overflow-hidden"
+      >
+        <div
+          ref={ref}
+          className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}
+          {...props}
+        />
+      </div>
+    )
+  },
+)
+CarouselContent.displayName = 'CarouselContent'
+
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel()
+
+    return (
       <div
         ref={ref}
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
+        role="group"
+        aria-roledescription="slide"
+        className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}
         {...props}
       />
-    </div>
-  )
-})
-CarouselContent.displayName = "CarouselContent"
-
-const CarouselItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel()
-
-  return (
-    <div
-      ref={ref}
-      role="group"
-      aria-roledescription="slide"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-CarouselItem.displayName = "CarouselItem"
+    )
+  },
+)
+CarouselItem.displayName = 'CarouselItem'
 
-const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel()
 
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute  h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  )
-})
-CarouselPrevious.displayName = "CarouselPrevious"
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          'absolute  h-8 w-8 rounded-full',
+          orientation === 'horizontal'
+            ? '-left-12 top-1/2 -translate-y-1/2'
+            : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+          className,
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}
+      >
+        <ArrowLeft className="h-4 w-4" />
+        <span className="sr-only">Previous slide</span>
+      </Button>
+    )
+  },
+)
+CarouselPrevious.displayName = 'CarouselPrevious'
 
-const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
+const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel()
 
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  )
-})
-CarouselNext.displayName = "CarouselNext"
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          'absolute h-8 w-8 rounded-full',
+          orientation === 'horizontal'
+            ? '-right-12 top-1/2 -translate-y-1/2'
+            : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+          className,
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}
+      >
+        <ArrowRight className="h-4 w-4" />
+        <span className="sr-only">Next slide</span>
+      </Button>
+    )
+  },
+)
+CarouselNext.displayName = 'CarouselNext'
 
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-}
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }
diff --git a/docs/www/registry/default/ui/ShadcnUI/chart.tsx b/docs/www/registry/default/ui/ShadcnUI/chart.tsx
index 8620baa..cc15cb0 100644
--- a/docs/www/registry/default/ui/ShadcnUI/chart.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/chart.tsx
@@ -1,21 +1,18 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
+import * as React from 'react'
+import * as RechartsPrimitive from 'recharts'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
+const THEMES = { light: '', dark: '.dark' } as const
 
 export type ChartConfig = {
   [k in string]: {
     label?: React.ReactNode
     icon?: React.ComponentType
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
+  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> })
 }
 
 type ChartContextProps = {
@@ -28,7 +25,7 @@ function useChart() {
   const context = React.useContext(ChartContext)
 
   if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
+    throw new Error('useChart must be used within a <ChartContainer />')
   }
 
   return context
@@ -36,15 +33,13 @@ function useChart() {
 
 const ChartContainer = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"div"> & {
+  React.ComponentProps<'div'> & {
     config: ChartConfig
-    children: React.ComponentProps<
-      typeof RechartsPrimitive.ResponsiveContainer
-    >["children"]
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children']
   }
 >(({ id, className, children, config, ...props }, ref) => {
   const uniqueId = React.useId()
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`
 
   return (
     <ChartContext.Provider value={{ config }}>
@@ -53,24 +48,23 @@ const ChartContainer = React.forwardRef<
         ref={ref}
         className={cn(
           "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-          className
+          className,
         )}
         {...props}
       >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
+        <ChartStyle
+          id={chartId}
+          config={config}
+        />
+        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
       </div>
     </ChartContext.Provider>
   )
 })
-ChartContainer.displayName = "Chart"
+ChartContainer.displayName = 'Chart'
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([_, config]) => config.theme || config.color
-  )
+  const colorConfig = Object.entries(config).filter(([_, config]) => config.theme || config.color)
 
   if (!colorConfig.length) {
     return null
@@ -85,16 +79,14 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
 ${prefix} [data-chart=${id}] {
 ${colorConfig
   .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color
+    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color
     return color ? `  --color-${key}: ${color};` : null
   })
-  .join("\n")}
+  .join('\n')}
 }
-`
+`,
           )
-          .join("\n"),
+          .join('\n'),
       }}
     />
   )
@@ -105,10 +97,10 @@ const ChartTooltip = RechartsPrimitive.Tooltip
 const ChartTooltipContent = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-    React.ComponentProps<"div"> & {
+    React.ComponentProps<'div'> & {
       hideLabel?: boolean
       hideIndicator?: boolean
-      indicator?: "line" | "dot" | "dashed"
+      indicator?: 'line' | 'dot' | 'dashed'
       nameKey?: string
       labelKey?: string
     }
@@ -118,7 +110,7 @@ const ChartTooltipContent = React.forwardRef<
       active,
       payload,
       className,
-      indicator = "dot",
+      indicator = 'dot',
       hideLabel = false,
       hideIndicator = false,
       label,
@@ -129,7 +121,7 @@ const ChartTooltipContent = React.forwardRef<
       nameKey,
       labelKey,
     },
-    ref
+    ref,
   ) => {
     const { config } = useChart()
 
@@ -139,54 +131,42 @@ const ChartTooltipContent = React.forwardRef<
       }
 
       const [item] = payload
-      const key = `${labelKey || item.dataKey || item.name || "value"}`
+      const key = `${labelKey || item.dataKey || item.name || 'value'}`
       const itemConfig = getPayloadConfigFromPayload(config, item, key)
       const value =
-        !labelKey && typeof label === "string"
+        !labelKey && typeof label === 'string'
           ? config[label as keyof typeof config]?.label || label
           : itemConfig?.label
 
       if (labelFormatter) {
-        return (
-          <div className={cn("font-medium", labelClassName)}>
-            {labelFormatter(value, payload)}
-          </div>
-        )
+        return <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>
       }
 
       if (!value) {
         return null
       }
 
-      return <div className={cn("font-medium", labelClassName)}>{value}</div>
-    }, [
-      label,
-      labelFormatter,
-      payload,
-      hideLabel,
-      labelClassName,
-      config,
-      labelKey,
-    ])
+      return <div className={cn('font-medium', labelClassName)}>{value}</div>
+    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])
 
     if (!active || !payload?.length) {
       return null
     }
 
-    const nestLabel = payload.length === 1 && indicator !== "dot"
+    const nestLabel = payload.length === 1 && indicator !== 'dot'
 
     return (
       <div
         ref={ref}
         className={cn(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
-          className
+          'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',
+          className,
         )}
       >
         {!nestLabel ? tooltipLabel : null}
         <div className="grid gap-1.5">
           {payload.map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`
+            const key = `${nameKey || item.name || item.dataKey || 'value'}`
             const itemConfig = getPayloadConfigFromPayload(config, item, key)
             const indicatorColor = color || item.payload.fill || item.color
 
@@ -194,8 +174,8 @@ const ChartTooltipContent = React.forwardRef<
               <div
                 key={item.dataKey}
                 className={cn(
-                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  indicator === "dot" && "items-center"
+                  'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
+                  indicator === 'dot' && 'items-center',
                 )}
               >
                 {formatter && item?.value !== undefined && item.name ? (
@@ -207,20 +187,16 @@ const ChartTooltipContent = React.forwardRef<
                     ) : (
                       !hideIndicator && (
                         <div
-                          className={cn(
-                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
-                            {
-                              "h-2.5 w-2.5": indicator === "dot",
-                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
-                                indicator === "dashed",
-                              "my-0.5": nestLabel && indicator === "dashed",
-                            }
-                          )}
+                          className={cn('shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]', {
+                            'h-2.5 w-2.5': indicator === 'dot',
+                            'w-1': indicator === 'line',
+                            'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
+                            'my-0.5': nestLabel && indicator === 'dashed',
+                          })}
                           style={
                             {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
+                              '--color-bg': indicatorColor,
+                              '--color-border': indicatorColor,
                             } as React.CSSProperties
                           }
                         />
@@ -228,15 +204,13 @@ const ChartTooltipContent = React.forwardRef<
                     )}
                     <div
                       className={cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
+                        'flex flex-1 justify-between leading-none',
+                        nestLabel ? 'items-end' : 'items-center',
                       )}
                     >
                       <div className="grid gap-1.5">
                         {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">
-                          {itemConfig?.label || item.name}
-                        </span>
+                        <span className="text-muted-foreground">{itemConfig?.label || item.name}</span>
                       </div>
                       {item.value && (
                         <span className="font-mono font-medium tabular-nums text-foreground">
@@ -252,114 +226,83 @@ const ChartTooltipContent = React.forwardRef<
         </div>
       </div>
     )
-  }
+  },
 )
-ChartTooltipContent.displayName = "ChartTooltip"
+ChartTooltipContent.displayName = 'ChartTooltip'
 
 const ChartLegend = RechartsPrimitive.Legend
 
 const ChartLegendContent = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"div"> &
-    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+  React.ComponentProps<'div'> &
+    Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
       hideIcon?: boolean
       nameKey?: string
     }
->(
-  (
-    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
-    ref
-  ) => {
-    const { config } = useChart()
-
-    if (!payload?.length) {
-      return null
-    }
+>(({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }, ref) => {
+  const { config } = useChart()
 
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "flex items-center justify-center gap-4",
-          verticalAlign === "top" ? "pb-3" : "pt-3",
-          className
-        )}
-      >
-        {payload.map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
-
-          return (
-            <div
-              key={item.value}
-              className={cn(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          )
-        })}
-      </div>
-    )
+  if (!payload?.length) {
+    return null
   }
-)
-ChartLegendContent.displayName = "ChartLegend"
+
+  return (
+    <div
+      ref={ref}
+      className={cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className)}
+    >
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || 'value'}`
+        const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+        return (
+          <div
+            key={item.value}
+            className={cn('flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground')}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        )
+      })}
+    </div>
+  )
+})
+ChartLegendContent.displayName = 'ChartLegend'
 
 // Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string
-) {
-  if (typeof payload !== "object" || payload === null) {
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
+  if (typeof payload !== 'object' || payload === null) {
     return undefined
   }
 
   const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
+    'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null
       ? payload.payload
       : undefined
 
   let configLabelKey: string = key
 
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
+  if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {
     configLabelKey = payload[key as keyof typeof payload] as string
   } else if (
     payloadPayload &&
     key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
   ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string
   }
 
-  return configLabelKey in config
-    ? config[configLabelKey]
-    : config[key as keyof typeof config]
+  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config]
 }
 
-export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-}
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle }
diff --git a/docs/www/registry/default/ui/ShadcnUI/checkbox.tsx b/docs/www/registry/default/ui/ShadcnUI/checkbox.tsx
index df61a13..b6d6f39 100644
--- a/docs/www/registry/default/ui/ShadcnUI/checkbox.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/checkbox.tsx
@@ -1,10 +1,10 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { Check } from 'lucide-react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -13,14 +13,12 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      className,
     )}
     {...props}
   >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
-    >
+    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
       <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
diff --git a/docs/www/registry/default/ui/ShadcnUI/collapsible.tsx b/docs/www/registry/default/ui/ShadcnUI/collapsible.tsx
index 9fa4894..1bbaed5 100644
--- a/docs/www/registry/default/ui/ShadcnUI/collapsible.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/collapsible.tsx
@@ -1,6 +1,6 @@
-"use client"
+'use client'
 
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
 
 const Collapsible = CollapsiblePrimitive.Root
 
diff --git a/docs/www/registry/default/ui/ShadcnUI/command.tsx b/docs/www/registry/default/ui/ShadcnUI/command.tsx
index 062ff93..293d52d 100644
--- a/docs/www/registry/default/ui/ShadcnUI/command.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/command.tsx
@@ -1,12 +1,12 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
+import * as React from 'react'
+import { type DialogProps } from '@radix-ui/react-dialog'
+import { Command as CommandPrimitive } from 'cmdk'
+import { Search } from 'lucide-react'
 
-import { cn } from "@/lib/utils"
-import { Dialog, DialogContent } from "@/registry/default/ui/"
+import { cn } from '@/lib/utils'
+import { Dialog, DialogContent } from '@/registry/default/ui/'
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -15,15 +15,15 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
+      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+      className,
     )}
     {...props}
   />
 ))
 Command.displayName = CommandPrimitive.displayName
 
-interface CommandDialogProps extends DialogProps { }
+interface CommandDialogProps extends DialogProps {}
 
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
@@ -41,13 +41,16 @@ const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+  <div
+    className="flex items-center border-b px-3"
+    cmdk-input-wrapper=""
+  >
     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        className,
       )}
       {...props}
     />
@@ -62,7 +65,7 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
     {...props}
   />
 ))
@@ -89,8 +92,8 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
+      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+      className,
     )}
     {...props}
   />
@@ -104,7 +107,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
+    className={cn('-mx-1 h-px bg-border', className)}
     {...props}
   />
 ))
@@ -118,7 +121,7 @@ const CommandItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
-      className
+      className,
     )}
     {...props}
   />
@@ -126,21 +129,15 @@ const CommandItem = React.forwardRef<
 
 CommandItem.displayName = CommandPrimitive.Item.displayName
 
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
+      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
       {...props}
     />
   )
 }
-CommandShortcut.displayName = "CommandShortcut"
+CommandShortcut.displayName = 'CommandShortcut'
 
 export {
   Command,
diff --git a/docs/www/registry/default/ui/ShadcnUI/context-menu.tsx b/docs/www/registry/default/ui/ShadcnUI/context-menu.tsx
index 93ef37b..3c72202 100644
--- a/docs/www/registry/default/ui/ShadcnUI/context-menu.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/context-menu.tsx
@@ -1,10 +1,10 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from 'react'
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
+import { Check, ChevronRight, Circle } from 'lucide-react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const ContextMenu = ContextMenuPrimitive.Root
 
@@ -27,9 +27,9 @@ const ContextMenuSubTrigger = React.forwardRef<
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      inset && 'pl-8',
+      className,
     )}
     {...props}
   >
@@ -46,8 +46,8 @@ const ContextMenuSubContent = React.forwardRef<
   <ContextMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className,
     )}
     {...props}
   />
@@ -62,8 +62,8 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
       )}
       {...props}
     />
@@ -80,9 +80,9 @@ const ContextMenuItem = React.forwardRef<
   <ContextMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className,
     )}
     {...props}
   />
@@ -96,8 +96,8 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
     )}
     checked={checked}
     {...props}
@@ -110,8 +110,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
     {children}
   </ContextMenuPrimitive.CheckboxItem>
 ))
-ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName
 
 const ContextMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
@@ -120,8 +119,8 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
     )}
     {...props}
   >
@@ -143,11 +142,7 @@ const ContextMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Label
     ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold text-foreground",
-      inset && "pl-8",
-      className
-    )}
+    className={cn('px-2 py-1.5 text-sm font-semibold text-foreground', inset && 'pl-8', className)}
     {...props}
   />
 ))
@@ -159,27 +154,21 @@ const ContextMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ContextMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    className={cn('-mx-1 my-1 h-px bg-border', className)}
     {...props}
   />
 ))
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
 
-const ContextMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
+      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
       {...props}
     />
   )
 }
-ContextMenuShortcut.displayName = "ContextMenuShortcut"
+ContextMenuShortcut.displayName = 'ContextMenuShortcut'
 
 export {
   ContextMenu,
diff --git a/docs/www/registry/default/ui/ShadcnUI/dialog.tsx b/docs/www/registry/default/ui/ShadcnUI/dialog.tsx
index 01ff19c..5c26cc2 100644
--- a/docs/www/registry/default/ui/ShadcnUI/dialog.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/dialog.tsx
@@ -1,10 +1,10 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Dialog = DialogPrimitive.Root
 
@@ -21,8 +21,8 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
     )}
     {...props}
   />
@@ -38,8 +38,8 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
       )}
       {...props}
     >
@@ -53,33 +53,21 @@ const DialogContent = React.forwardRef<
 ))
 DialogContent.displayName = DialogPrimitive.Content.displayName
 
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
+    className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)}
     {...props}
   />
 )
-DialogHeader.displayName = "DialogHeader"
+DialogHeader.displayName = 'DialogHeader'
 
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
     {...props}
   />
 )
-DialogFooter.displayName = "DialogFooter"
+DialogFooter.displayName = 'DialogFooter'
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -87,10 +75,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
     {...props}
   />
 ))
@@ -102,7 +87,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
 ))
diff --git a/docs/www/registry/default/ui/ShadcnUI/drawer.tsx b/docs/www/registry/default/ui/ShadcnUI/drawer.tsx
index 6a0ef53..5e803a0 100644
--- a/docs/www/registry/default/ui/ShadcnUI/drawer.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/drawer.tsx
@@ -1,20 +1,17 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import * as React from 'react'
+import { Drawer as DrawerPrimitive } from 'vaul'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
-const Drawer = ({
-  shouldScaleBackground = true,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+const Drawer = ({ shouldScaleBackground = true, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
   <DrawerPrimitive.Root
     shouldScaleBackground={shouldScaleBackground}
     {...props}
   />
 )
-Drawer.displayName = "Drawer"
+Drawer.displayName = 'Drawer'
 
 const DrawerTrigger = DrawerPrimitive.Trigger
 
@@ -28,7 +25,7 @@ const DrawerOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Overlay
     ref={ref}
-    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    className={cn('fixed inset-0 z-50 bg-black/80', className)}
     {...props}
   />
 ))
@@ -43,8 +40,8 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-        className
+        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        className,
       )}
       {...props}
     >
@@ -53,29 +50,23 @@ const DrawerContent = React.forwardRef<
     </DrawerPrimitive.Content>
   </DrawerPortal>
 ))
-DrawerContent.displayName = "DrawerContent"
+DrawerContent.displayName = 'DrawerContent'
 
-const DrawerHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
     {...props}
   />
 )
-DrawerHeader.displayName = "DrawerHeader"
+DrawerHeader.displayName = 'DrawerHeader'
 
-const DrawerFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    className={cn('mt-auto flex flex-col gap-2 p-4', className)}
     {...props}
   />
 )
-DrawerFooter.displayName = "DrawerFooter"
+DrawerFooter.displayName = 'DrawerFooter'
 
 const DrawerTitle = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Title>,
@@ -83,10 +74,7 @@ const DrawerTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Title
     ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
     {...props}
   />
 ))
@@ -98,7 +86,7 @@ const DrawerDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
 ))
diff --git a/docs/www/registry/default/ui/ShadcnUI/dropdown-menu.tsx b/docs/www/registry/default/ui/ShadcnUI/dropdown-menu.tsx
index f69a0d6..c634a72 100644
--- a/docs/www/registry/default/ui/ShadcnUI/dropdown-menu.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/dropdown-menu.tsx
@@ -1,10 +1,10 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { Check, ChevronRight, Circle } from 'lucide-react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 
@@ -27,9 +27,9 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      inset && "pl-8",
-      className
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      inset && 'pl-8',
+      className,
     )}
     {...props}
   >
@@ -37,8 +37,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     <ChevronRight className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -47,14 +46,13 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className,
     )}
     {...props}
   />
 ))
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -65,8 +63,8 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
       )}
       {...props}
     />
@@ -83,9 +81,9 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className,
     )}
     {...props}
   />
@@ -99,8 +97,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
     )}
     checked={checked}
     {...props}
@@ -113,8 +111,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
 ))
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -123,8 +120,8 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
     )}
     {...props}
   >
@@ -146,11 +143,7 @@ const DropdownMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
+    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
     {...props}
   />
 ))
@@ -162,24 +155,21 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
 ))
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
 
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
       {...props}
     />
   )
 }
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
 
 export {
   DropdownMenu,
diff --git a/docs/www/registry/default/ui/ShadcnUI/form.tsx b/docs/www/registry/default/ui/ShadcnUI/form.tsx
index cbbef7a..f555ae1 100644
--- a/docs/www/registry/default/ui/ShadcnUI/form.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/form.tsx
@@ -1,36 +1,27 @@
-"use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
-import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  FormProvider,
-  useFormContext,
-} from "react-hook-form"
-
-import { cn } from "@/lib/utils"
-import { Label } from "@/registry/default/ui/"
+'use client'
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { Slot } from '@radix-ui/react-slot'
+import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from 'react-hook-form'
+
+import { cn } from '@/lib/utils'
+import { Label } from '@/registry/default/ui/'
 
 const Form = FormProvider
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
   name: TName
 }
 
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -49,7 +40,7 @@ const useFormField = () => {
   const fieldState = getFieldState(fieldContext.name, formState)
 
   if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+    throw new Error('useFormField should be used within <FormField>')
   }
 
   const { id } = itemContext
@@ -68,23 +59,24 @@ type FormItemContextValue = {
   id: string
 }
 
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId()
+
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div
+          ref={ref}
+          className={cn('space-y-2', className)}
+          {...props}
+        />
+      </FormItemContext.Provider>
+    )
+  },
 )
-
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const id = React.useId()
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
-    </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = "FormItem"
+FormItem.displayName = 'FormItem'
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
@@ -95,84 +87,68 @@ const FormLabel = React.forwardRef<
   return (
     <Label
       ref={ref}
-      className={cn(error && "text-destructive", className)}
+      className={cn(error && 'text-destructive', className)}
       htmlFor={formItemId}
       {...props}
     />
   )
 })
-FormLabel.displayName = "FormLabel"
-
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
-
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  )
-})
-FormControl.displayName = "FormControl"
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
-
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
-})
-FormDescription.displayName = "FormDescription"
-
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message) : children
-
-  if (!body) {
-    return null
-  }
+FormLabel.displayName = 'FormLabel'
+
+const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
+  ({ ...props }, ref) => {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+    return (
+      <Slot
+        ref={ref}
+        id={formItemId}
+        aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+        aria-invalid={!!error}
+        {...props}
+      />
+    )
+  },
+)
+FormControl.displayName = 'FormControl'
+
+const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => {
+    const { formDescriptionId } = useFormField()
+
+    return (
+      <p
+        ref={ref}
+        id={formDescriptionId}
+        className={cn('text-sm text-muted-foreground', className)}
+        {...props}
+      />
+    )
+  },
+)
+FormDescription.displayName = 'FormDescription'
+
+const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { error, formMessageId } = useFormField()
+    const body = error ? String(error?.message) : children
+
+    if (!body) {
+      return null
+    }
+
+    return (
+      <p
+        ref={ref}
+        id={formMessageId}
+        className={cn('text-sm font-medium text-destructive', className)}
+        {...props}
+      >
+        {body}
+      </p>
+    )
+  },
+)
+FormMessage.displayName = 'FormMessage'
 
-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn("text-sm font-medium text-destructive", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  )
-})
-FormMessage.displayName = "FormMessage"
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-}
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField }
diff --git a/docs/www/registry/default/ui/ShadcnUI/hover-card.tsx b/docs/www/registry/default/ui/ShadcnUI/hover-card.tsx
index e54d91c..7b9302a 100644
--- a/docs/www/registry/default/ui/ShadcnUI/hover-card.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/hover-card.tsx
@@ -1,9 +1,9 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+import * as React from 'react'
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const HoverCard = HoverCardPrimitive.Root
 
@@ -12,14 +12,14 @@ const HoverCardTrigger = HoverCardPrimitive.Trigger
 const HoverCardContent = React.forwardRef<
   React.ElementRef<typeof HoverCardPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
   <HoverCardPrimitive.Content
     ref={ref}
     align={align}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className,
     )}
     {...props}
   />
diff --git a/docs/www/registry/default/ui/ShadcnUI/input-otp.tsx b/docs/www/registry/default/ui/ShadcnUI/input-otp.tsx
index f66fcfa..76fafbf 100644
--- a/docs/www/registry/default/ui/ShadcnUI/input-otp.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/input-otp.tsx
@@ -1,38 +1,37 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import { OTPInput, OTPInputContext } from "input-otp"
-import { Dot } from "lucide-react"
+import * as React from 'react'
+import { OTPInput, OTPInputContext } from 'input-otp'
+import { Dot } from 'lucide-react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
-const InputOTP = React.forwardRef<
-  React.ElementRef<typeof OTPInput>,
-  React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, containerClassName, ...props }, ref) => (
-  <OTPInput
-    ref={ref}
-    containerClassName={cn(
-      "flex items-center gap-2 has-[:disabled]:opacity-50",
-      containerClassName
-    )}
-    className={cn("disabled:cursor-not-allowed", className)}
-    {...props}
-  />
-))
-InputOTP.displayName = "InputOTP"
+const InputOTP = React.forwardRef<React.ElementRef<typeof OTPInput>, React.ComponentPropsWithoutRef<typeof OTPInput>>(
+  ({ className, containerClassName, ...props }, ref) => (
+    <OTPInput
+      ref={ref}
+      containerClassName={cn('flex items-center gap-2 has-[:disabled]:opacity-50', containerClassName)}
+      className={cn('disabled:cursor-not-allowed', className)}
+      {...props}
+    />
+  ),
+)
+InputOTP.displayName = 'InputOTP'
 
-const InputOTPGroup = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("flex items-center", className)} {...props} />
-))
-InputOTPGroup.displayName = "InputOTPGroup"
+const InputOTPGroup = React.forwardRef<React.ElementRef<'div'>, React.ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex items-center', className)}
+      {...props}
+    />
+  ),
+)
+InputOTPGroup.displayName = 'InputOTPGroup'
 
 const InputOTPSlot = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div"> & { index: number }
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'> & { index: number }
 >(({ index, className, ...props }, ref) => {
   const inputOTPContext = React.useContext(OTPInputContext)
   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
@@ -41,9 +40,9 @@ const InputOTPSlot = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "z-10 ring-2 ring-ring ring-offset-background",
-        className
+        'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+        isActive && 'z-10 ring-2 ring-ring ring-offset-background',
+        className,
       )}
       {...props}
     >
@@ -56,16 +55,19 @@ const InputOTPSlot = React.forwardRef<
     </div>
   )
 })
-InputOTPSlot.displayName = "InputOTPSlot"
+InputOTPSlot.displayName = 'InputOTPSlot'
 
-const InputOTPSeparator = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ ...props }, ref) => (
-  <div ref={ref} role="separator" {...props}>
-    <Dot />
-  </div>
-))
-InputOTPSeparator.displayName = "InputOTPSeparator"
+const InputOTPSeparator = React.forwardRef<React.ElementRef<'div'>, React.ComponentPropsWithoutRef<'div'>>(
+  ({ ...props }, ref) => (
+    <div
+      ref={ref}
+      role="separator"
+      {...props}
+    >
+      <Dot />
+    </div>
+  ),
+)
+InputOTPSeparator.displayName = 'InputOTPSeparator'
 
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/docs/www/registry/default/ui/ShadcnUI/input.tsx b/docs/www/registry/default/ui/ShadcnUI/input.tsx
index 677d05f..deb6d0c 100644
--- a/docs/www/registry/default/ui/ShadcnUI/input.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/input.tsx
@@ -1,25 +1,22 @@
-import * as React from "react"
+import * as React from 'react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = "Input"
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Input.displayName = 'Input'
 
 export { Input }
diff --git a/docs/www/registry/default/ui/ShadcnUI/label.tsx b/docs/www/registry/default/ui/ShadcnUI/label.tsx
index 5341821..7ec6ff1 100644
--- a/docs/www/registry/default/ui/ShadcnUI/label.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/label.tsx
@@ -1,19 +1,16 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
-const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
+const labelVariants = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70')
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
   <LabelPrimitive.Root
     ref={ref}
diff --git a/docs/www/registry/default/ui/ShadcnUI/menubar.tsx b/docs/www/registry/default/ui/ShadcnUI/menubar.tsx
index 5586fa9..fdef02a 100644
--- a/docs/www/registry/default/ui/ShadcnUI/menubar.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/menubar.tsx
@@ -1,10 +1,10 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from 'react'
+import * as MenubarPrimitive from '@radix-ui/react-menubar'
+import { Check, ChevronRight, Circle } from 'lucide-react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const MenubarMenu = MenubarPrimitive.Menu
 
@@ -22,10 +22,7 @@ const Menubar = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <MenubarPrimitive.Root
     ref={ref}
-    className={cn(
-      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
-      className
-    )}
+    className={cn('flex h-10 items-center space-x-1 rounded-md border bg-background p-1', className)}
     {...props}
   />
 ))
@@ -38,8 +35,8 @@ const MenubarTrigger = React.forwardRef<
   <MenubarPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      className
+      'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      className,
     )}
     {...props}
   />
@@ -55,9 +52,9 @@ const MenubarSubTrigger = React.forwardRef<
   <MenubarPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      inset && 'pl-8',
+      className,
     )}
     {...props}
   >
@@ -74,8 +71,8 @@ const MenubarSubContent = React.forwardRef<
   <MenubarPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className,
     )}
     {...props}
   />
@@ -85,26 +82,21 @@ MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
 const MenubarContent = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
->(
-  (
-    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
-    ref
-  ) => (
-    <MenubarPrimitive.Portal>
-      <MenubarPrimitive.Content
-        ref={ref}
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-          className
-        )}
-        {...props}
-      />
-    </MenubarPrimitive.Portal>
-  )
-)
+>(({ className, align = 'start', alignOffset = -4, sideOffset = 8, ...props }, ref) => (
+  <MenubarPrimitive.Portal>
+    <MenubarPrimitive.Content
+      ref={ref}
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
+      )}
+      {...props}
+    />
+  </MenubarPrimitive.Portal>
+))
 MenubarContent.displayName = MenubarPrimitive.Content.displayName
 
 const MenubarItem = React.forwardRef<
@@ -116,9 +108,9 @@ const MenubarItem = React.forwardRef<
   <MenubarPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className,
     )}
     {...props}
   />
@@ -132,8 +124,8 @@ const MenubarCheckboxItem = React.forwardRef<
   <MenubarPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
     )}
     checked={checked}
     {...props}
@@ -155,8 +147,8 @@ const MenubarRadioItem = React.forwardRef<
   <MenubarPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
     )}
     {...props}
   >
@@ -178,11 +170,7 @@ const MenubarLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <MenubarPrimitive.Label
     ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
+    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
     {...props}
   />
 ))
@@ -194,27 +182,21 @@ const MenubarSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <MenubarPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
 ))
 MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
 
-const MenubarShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
+      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
       {...props}
     />
   )
 }
-MenubarShortcut.displayname = "MenubarShortcut"
+MenubarShortcut.displayname = 'MenubarShortcut'
 
 export {
   Menubar,
diff --git a/docs/www/registry/default/ui/ShadcnUI/navigation-menu.tsx b/docs/www/registry/default/ui/ShadcnUI/navigation-menu.tsx
index 1419f56..e2ca5b1 100644
--- a/docs/www/registry/default/ui/ShadcnUI/navigation-menu.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/navigation-menu.tsx
@@ -1,9 +1,9 @@
-import * as React from "react"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
-import { cva } from "class-variance-authority"
-import { ChevronDown } from "lucide-react"
+import * as React from 'react'
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
+import { cva } from 'class-variance-authority'
+import { ChevronDown } from 'lucide-react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,
@@ -11,10 +11,7 @@ const NavigationMenu = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <NavigationMenuPrimitive.Root
     ref={ref}
-    className={cn(
-      "relative z-10 flex max-w-max flex-1 items-center justify-center",
-      className
-    )}
+    className={cn('relative z-10 flex max-w-max flex-1 items-center justify-center', className)}
     {...props}
   >
     {children}
@@ -29,10 +26,7 @@ const NavigationMenuList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <NavigationMenuPrimitive.List
     ref={ref}
-    className={cn(
-      "group flex flex-1 list-none items-center justify-center space-x-1",
-      className
-    )}
+    className={cn('group flex flex-1 list-none items-center justify-center space-x-1', className)}
     {...props}
   />
 ))
@@ -41,7 +35,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 const NavigationMenuItem = NavigationMenuPrimitive.Item
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
 )
 
 const NavigationMenuTrigger = React.forwardRef<
@@ -50,10 +44,10 @@ const NavigationMenuTrigger = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <NavigationMenuPrimitive.Trigger
     ref={ref}
-    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    className={cn(navigationMenuTriggerStyle(), 'group', className)}
     {...props}
   >
-    {children}{" "}
+    {children}{' '}
     <ChevronDown
       className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
       aria-hidden="true"
@@ -69,8 +63,8 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
-      className
+      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ',
+      className,
     )}
     {...props}
   />
@@ -83,19 +77,18 @@ const NavigationMenuViewport = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(({ className, ...props }, ref) => (
-  <div className={cn("absolute left-0 top-full flex justify-center")}>
+  <div className={cn('absolute left-0 top-full flex justify-center')}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
-        className
+        'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
+        className,
       )}
       ref={ref}
       {...props}
     />
   </div>
 ))
-NavigationMenuViewport.displayName =
-  NavigationMenuPrimitive.Viewport.displayName
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName
 
 const NavigationMenuIndicator = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
@@ -104,16 +97,15 @@ const NavigationMenuIndicator = React.forwardRef<
   <NavigationMenuPrimitive.Indicator
     ref={ref}
     className={cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
-      className
+      'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
+      className,
     )}
     {...props}
   >
     <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuPrimitive.Indicator>
 ))
-NavigationMenuIndicator.displayName =
-  NavigationMenuPrimitive.Indicator.displayName
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName
 
 export {
   navigationMenuTriggerStyle,
diff --git a/docs/www/registry/default/ui/ShadcnUI/pagination.tsx b/docs/www/registry/default/ui/ShadcnUI/pagination.tsx
index b738c60..d488b6d 100644
--- a/docs/www/registry/default/ui/ShadcnUI/pagination.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/pagination.tsx
@@ -1,110 +1,96 @@
-import * as React from "react"
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from 'react'
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
 
-import { cn } from "@/lib/utils"
-import { ButtonProps, buttonVariants } from "@/registry/default/ui/"
+import { cn } from '@/lib/utils'
+import { ButtonProps, buttonVariants } from '@/registry/default/ui/'
 
-const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
   <nav
     role="navigation"
     aria-label="pagination"
-    className={cn("mx-auto flex w-full justify-center", className)}
+    className={cn('mx-auto flex w-full justify-center', className)}
     {...props}
   />
 )
-Pagination.displayName = "Pagination"
+Pagination.displayName = 'Pagination'
 
-const PaginationContent = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      className={cn('flex flex-row items-center gap-1', className)}
+      {...props}
+    />
+  ),
+)
+PaginationContent.displayName = 'PaginationContent'
+
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ className, ...props }, ref) => (
+  <li
     ref={ref}
-    className={cn("flex flex-row items-center gap-1", className)}
+    className={cn('', className)}
     {...props}
   />
 ))
-PaginationContent.displayName = "PaginationContent"
-
-const PaginationItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ className, ...props }, ref) => (
-  <li ref={ref} className={cn("", className)} {...props} />
-))
-PaginationItem.displayName = "PaginationItem"
+PaginationItem.displayName = 'PaginationItem'
 
 type PaginationLinkProps = {
   isActive?: boolean
-} & Pick<ButtonProps, "size"> &
-  React.ComponentProps<"a">
+} & Pick<ButtonProps, 'size'> &
+  React.ComponentProps<'a'>
 
-const PaginationLink = ({
-  className,
-  isActive,
-  size = "icon",
-  ...props
-}: PaginationLinkProps) => (
+const PaginationLink = ({ className, isActive, size = 'icon', ...props }: PaginationLinkProps) => (
   <a
-    aria-current={isActive ? "page" : undefined}
+    aria-current={isActive ? 'page' : undefined}
     className={cn(
       buttonVariants({
-        variant: isActive ? "outline" : "ghost",
+        variant: isActive ? 'outline' : 'ghost',
         size,
       }),
-      className
+      className,
     )}
     {...props}
   />
 )
-PaginationLink.displayName = "PaginationLink"
+PaginationLink.displayName = 'PaginationLink'
 
-const PaginationPrevious = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
+const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
   <PaginationLink
     aria-label="Go to previous page"
     size="default"
-    className={cn("gap-1 pl-2.5", className)}
+    className={cn('gap-1 pl-2.5', className)}
     {...props}
   >
     <ChevronLeft className="h-4 w-4" />
     <span>Previous</span>
   </PaginationLink>
 )
-PaginationPrevious.displayName = "PaginationPrevious"
+PaginationPrevious.displayName = 'PaginationPrevious'
 
-const PaginationNext = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
+const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
   <PaginationLink
     aria-label="Go to next page"
     size="default"
-    className={cn("gap-1 pr-2.5", className)}
+    className={cn('gap-1 pr-2.5', className)}
     {...props}
   >
     <span>Next</span>
     <ChevronRight className="h-4 w-4" />
   </PaginationLink>
 )
-PaginationNext.displayName = "PaginationNext"
+PaginationNext.displayName = 'PaginationNext'
 
-const PaginationEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
   <span
     aria-hidden
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
     {...props}
   >
     <MoreHorizontal className="h-4 w-4" />
     <span className="sr-only">More pages</span>
   </span>
 )
-PaginationEllipsis.displayName = "PaginationEllipsis"
+PaginationEllipsis.displayName = 'PaginationEllipsis'
 
 export {
   Pagination,
diff --git a/docs/www/registry/default/ui/ShadcnUI/popover.tsx b/docs/www/registry/default/ui/ShadcnUI/popover.tsx
index a0ec48b..ce5e43f 100644
--- a/docs/www/registry/default/ui/ShadcnUI/popover.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/popover.tsx
@@ -1,9 +1,9 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Popover = PopoverPrimitive.Root
 
@@ -12,15 +12,15 @@ const PopoverTrigger = PopoverPrimitive.Trigger
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
       )}
       {...props}
     />
diff --git a/docs/www/registry/default/ui/ShadcnUI/progress.tsx b/docs/www/registry/default/ui/ShadcnUI/progress.tsx
index 5c87ea4..435d920 100644
--- a/docs/www/registry/default/ui/ShadcnUI/progress.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/progress.tsx
@@ -1,9 +1,9 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as React from 'react'
+import * as ProgressPrimitive from '@radix-ui/react-progress'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
@@ -11,10 +11,7 @@ const Progress = React.forwardRef<
 >(({ className, value, ...props }, ref) => (
   <ProgressPrimitive.Root
     ref={ref}
-    className={cn(
-      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
-      className
-    )}
+    className={cn('relative h-4 w-full overflow-hidden rounded-full bg-secondary', className)}
     {...props}
   >
     <ProgressPrimitive.Indicator
diff --git a/docs/www/registry/default/ui/ShadcnUI/radio-group.tsx b/docs/www/registry/default/ui/ShadcnUI/radio-group.tsx
index e9bde17..5b536e9 100644
--- a/docs/www/registry/default/ui/ShadcnUI/radio-group.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/radio-group.tsx
@@ -1,10 +1,10 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { Circle } from "lucide-react"
+import * as React from 'react'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { Circle } from 'lucide-react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -12,7 +12,7 @@ const RadioGroup = React.forwardRef<
 >(({ className, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
+      className={cn('grid gap-2', className)}
       {...props}
       ref={ref}
     />
@@ -28,8 +28,8 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
       )}
       {...props}
     >
diff --git a/docs/www/registry/default/ui/ShadcnUI/resizable.tsx b/docs/www/registry/default/ui/ShadcnUI/resizable.tsx
index f4bc558..a3e92c7 100644
--- a/docs/www/registry/default/ui/ShadcnUI/resizable.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/resizable.tsx
@@ -1,19 +1,13 @@
-"use client"
+'use client'
 
-import { GripVertical } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
+import { GripVertical } from 'lucide-react'
+import * as ResizablePrimitive from 'react-resizable-panels'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
-const ResizablePanelGroup = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+const ResizablePanelGroup = ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
   <ResizablePrimitive.PanelGroup
-    className={cn(
-      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className
-    )}
+    className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}
     {...props}
   />
 )
@@ -29,8 +23,8 @@ const ResizableHandle = ({
 }) => (
   <ResizablePrimitive.PanelResizeHandle
     className={cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-      className
+      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      className,
     )}
     {...props}
   >
diff --git a/docs/www/registry/default/ui/ShadcnUI/scroll-area.tsx b/docs/www/registry/default/ui/ShadcnUI/scroll-area.tsx
index 0b4a48d..f7d83f5 100644
--- a/docs/www/registry/default/ui/ShadcnUI/scroll-area.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/scroll-area.tsx
@@ -1,9 +1,9 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
@@ -11,12 +11,10 @@ const ScrollArea = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
-    className={cn("relative overflow-hidden", className)}
+    className={cn('relative overflow-hidden', className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
@@ -26,17 +24,15 @@ ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
+>(({ className, orientation = 'vertical', ...props }, ref) => (
   <ScrollAreaPrimitive.ScrollAreaScrollbar
     ref={ref}
     orientation={orientation}
     className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className,
     )}
     {...props}
   >
diff --git a/docs/www/registry/default/ui/ShadcnUI/separator.tsx b/docs/www/registry/default/ui/ShadcnUI/separator.tsx
index 12d81c4..30df1ae 100644
--- a/docs/www/registry/default/ui/ShadcnUI/separator.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/separator.tsx
@@ -1,31 +1,22 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      )}
-      {...props}
-    />
-  )
-)
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className)}
+    {...props}
+  />
+))
 Separator.displayName = SeparatorPrimitive.Root.displayName
 
 export { Separator }
diff --git a/docs/www/registry/default/ui/ShadcnUI/sheet.tsx b/docs/www/registry/default/ui/ShadcnUI/sheet.tsx
index a37f17b..41aaa59 100644
--- a/docs/www/registry/default/ui/ShadcnUI/sheet.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/sheet.tsx
@@ -1,11 +1,11 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import * as React from 'react'
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { X } from 'lucide-react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Sheet = SheetPrimitive.Root
 
@@ -21,8 +21,8 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
     )}
     {...props}
     ref={ref}
@@ -31,76 +31,63 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
   {
     variants: {
       side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
         bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
         right:
-          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
       },
     },
     defaultVariants: {
-      side: "right",
+      side: 'right',
     },
-  }
+  },
 )
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
     VariantProps<typeof sheetVariants> {}
 
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
-      {...props}
-    >
-      {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-    </SheetPrimitive.Content>
-  </SheetPortal>
-))
+const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
+  ({ side = 'right', className, children, ...props }, ref) => (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        ref={ref}
+        className={cn(sheetVariants({ side }), className)}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  ),
+)
 SheetContent.displayName = SheetPrimitive.Content.displayName
 
-const SheetHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
+    className={cn('flex flex-col space-y-2 text-center sm:text-left', className)}
     {...props}
   />
 )
-SheetHeader.displayName = "SheetHeader"
+SheetHeader.displayName = 'SheetHeader'
 
-const SheetFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
     {...props}
   />
 )
-SheetFooter.displayName = "SheetFooter"
+SheetFooter.displayName = 'SheetFooter'
 
 const SheetTitle = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Title>,
@@ -108,7 +95,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold text-foreground", className)}
+    className={cn('text-lg font-semibold text-foreground', className)}
     {...props}
   />
 ))
@@ -120,7 +107,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
 ))
diff --git a/docs/www/registry/default/ui/ShadcnUI/skeleton.tsx b/docs/www/registry/default/ui/ShadcnUI/skeleton.tsx
index 01b8b6d..411d6ef 100644
--- a/docs/www/registry/default/ui/ShadcnUI/skeleton.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/skeleton.tsx
@@ -1,12 +1,9 @@
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn("animate-pulse rounded-md bg-muted", className)}
+      className={cn('animate-pulse rounded-md bg-muted', className)}
       {...props}
     />
   )
diff --git a/docs/www/registry/default/ui/ShadcnUI/slider.tsx b/docs/www/registry/default/ui/ShadcnUI/slider.tsx
index c31c2b3..4622e78 100644
--- a/docs/www/registry/default/ui/ShadcnUI/slider.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/slider.tsx
@@ -1,9 +1,9 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as SliderPrimitive from "@radix-ui/react-slider"
+import * as React from 'react'
+import * as SliderPrimitive from '@radix-ui/react-slider'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
@@ -11,10 +11,7 @@ const Slider = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SliderPrimitive.Root
     ref={ref}
-    className={cn(
-      "relative flex w-full touch-none select-none items-center",
-      className
-    )}
+    className={cn('relative flex w-full touch-none select-none items-center', className)}
     {...props}
   >
     <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
diff --git a/docs/www/registry/default/ui/ShadcnUI/sonner.tsx b/docs/www/registry/default/ui/ShadcnUI/sonner.tsx
index 452f4d9..72f9f62 100644
--- a/docs/www/registry/default/ui/ShadcnUI/sonner.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/sonner.tsx
@@ -1,26 +1,24 @@
-"use client"
+'use client'
 
-import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
+import { useTheme } from 'next-themes'
+import { Toaster as Sonner } from 'sonner'
 
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+  const { theme = 'system' } = useTheme()
 
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme={theme as ToasterProps['theme']}
       className="toaster group"
       toastOptions={{
         classNames: {
           toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-muted-foreground',
+          actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+          cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
         },
       }}
       {...props}
diff --git a/docs/www/registry/default/ui/ShadcnUI/switch.tsx b/docs/www/registry/default/ui/ShadcnUI/switch.tsx
index bc69cf2..4ffe97a 100644
--- a/docs/www/registry/default/ui/ShadcnUI/switch.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/switch.tsx
@@ -1,9 +1,9 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as React from 'react'
+import * as SwitchPrimitives from '@radix-ui/react-switch'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -11,15 +11,15 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      className,
     )}
     {...props}
     ref={ref}
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/docs/www/registry/default/ui/ShadcnUI/table.tsx b/docs/www/registry/default/ui/ShadcnUI/table.tsx
index 7f3502f..763ed40 100644
--- a/docs/www/registry/default/ui/ShadcnUI/table.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/table.tsx
@@ -1,117 +1,98 @@
-import * as React from "react"
+import * as React from 'react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table
+        ref={ref}
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  ),
+)
+Table.displayName = 'Table'
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <thead
       ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
+      className={cn('[&_tr]:border-b', className)}
       {...props}
     />
-  </div>
-))
-Table.displayName = "Table"
-
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
+  ),
+)
+TableHeader.displayName = 'TableHeader'
 
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-))
-TableBody.displayName = "TableBody"
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody
+      ref={ref}
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  ),
+)
+TableBody.displayName = 'TableBody'
 
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
-    )}
-    {...props}
-  />
-))
-TableFooter.displayName = "TableFooter"
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot
+      ref={ref}
+      className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
+      {...props}
+    />
+  ),
+)
+TableFooter.displayName = 'TableFooter'
 
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
-    )}
-    {...props}
-  />
-))
-TableRow.displayName = "TableRow"
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)}
+      {...props}
+    />
+  ),
+)
+TableRow.displayName = 'TableRow'
 
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className
-    )}
-    {...props}
-  />
-))
-TableHead.displayName = "TableHead"
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(
+        'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+TableHead.displayName = 'TableHead'
 
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
-    {...props}
-  />
-))
-TableCell.displayName = "TableCell"
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td
+      ref={ref}
+      className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+      {...props}
+    />
+  ),
+)
+TableCell.displayName = 'TableCell'
 
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-TableCaption.displayName = "TableCaption"
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption
+      ref={ref}
+      className={cn('mt-4 text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  ),
+)
+TableCaption.displayName = 'TableCaption'
 
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }
diff --git a/docs/www/registry/default/ui/ShadcnUI/tabs.tsx b/docs/www/registry/default/ui/ShadcnUI/tabs.tsx
index 26eb109..03caf14 100644
--- a/docs/www/registry/default/ui/ShadcnUI/tabs.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/tabs.tsx
@@ -1,9 +1,9 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from 'react'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Tabs = TabsPrimitive.Root
 
@@ -14,8 +14,8 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
+      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      className,
     )}
     {...props}
   />
@@ -29,8 +29,8 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      className,
     )}
     {...props}
   />
@@ -44,8 +44,8 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      className,
     )}
     {...props}
   />
diff --git a/docs/www/registry/default/ui/ShadcnUI/textarea.tsx b/docs/www/registry/default/ui/ShadcnUI/textarea.tsx
index 9f9a6dc..08dbff8 100644
--- a/docs/www/registry/default/ui/ShadcnUI/textarea.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/textarea.tsx
@@ -1,24 +1,21 @@
-import * as React from "react"
+import * as React from 'react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Textarea.displayName = "Textarea"
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = 'Textarea'
 
 export { Textarea }
diff --git a/docs/www/registry/default/ui/ShadcnUI/toast.tsx b/docs/www/registry/default/ui/ShadcnUI/toast.tsx
index 521b94b..3045e55 100644
--- a/docs/www/registry/default/ui/ShadcnUI/toast.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/toast.tsx
@@ -1,11 +1,11 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import * as React from 'react'
+import * as ToastPrimitives from '@radix-ui/react-toast'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { X } from 'lucide-react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const ToastProvider = ToastPrimitives.Provider
 
@@ -16,8 +16,8 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
+      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      className,
     )}
     {...props}
   />
@@ -25,25 +25,23 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
   {
     variants: {
       variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
+        default: 'border bg-background text-foreground',
+        destructive: 'destructive group border-destructive bg-destructive text-destructive-foreground',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
-  }
+  },
 )
 
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
   return (
     <ToastPrimitives.Root
@@ -62,8 +60,8 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+      className,
     )}
     {...props}
   />
@@ -77,8 +75,8 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
+      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+      className,
     )}
     toast-close=""
     {...props}
@@ -94,7 +92,7 @@ const ToastTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Title
     ref={ref}
-    className={cn("text-sm font-semibold", className)}
+    className={cn('text-sm font-semibold', className)}
     {...props}
   />
 ))
@@ -106,7 +104,7 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
-    className={cn("text-sm opacity-90", className)}
+    className={cn('text-sm opacity-90', className)}
     {...props}
   />
 ))
diff --git a/docs/www/registry/default/ui/ShadcnUI/toaster.tsx b/docs/www/registry/default/ui/ShadcnUI/toaster.tsx
index 8205e66..7ad56d5 100644
--- a/docs/www/registry/default/ui/ShadcnUI/toaster.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/toaster.tsx
@@ -1,4 +1,4 @@
-"use client"
+'use client'
 
 import {
   Toast,
@@ -7,8 +7,8 @@ import {
   ToastProvider,
   ToastTitle,
   ToastViewport,
-} from "@/registry/default/ui/toast"
-import { useToast } from "@/registry/default/ui/use-toast"
+} from '@/registry/default/ui/toast'
+import { useToast } from '@/registry/default/ui/use-toast'
 
 export function Toaster() {
   const { toasts } = useToast()
@@ -17,12 +17,13 @@ export function Toaster() {
     <ToastProvider>
       {toasts.map(function ({ id, title, description, action, ...props }) {
         return (
-          <Toast key={id} {...props}>
+          <Toast
+            key={id}
+            {...props}
+          >
             <div className="grid gap-1">
               {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
+              {description && <ToastDescription>{description}</ToastDescription>}
             </div>
             {action}
             <ToastClose />
diff --git a/docs/www/registry/default/ui/ShadcnUI/toggle-group.tsx b/docs/www/registry/default/ui/ShadcnUI/toggle-group.tsx
index 03af009..abaf351 100644
--- a/docs/www/registry/default/ui/ShadcnUI/toggle-group.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/toggle-group.tsx
@@ -1,32 +1,27 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
-import { type VariantProps } from "class-variance-authority"
+import * as React from 'react'
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
+import { type VariantProps } from 'class-variance-authority'
 
-import { cn } from "@/lib/utils"
-import { toggleVariants } from "@/registry/default/ui/"
+import { cn } from '@/lib/utils'
+import { toggleVariants } from '@/registry/default/ui/'
 
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants>
->({
-  size: "default",
-  variant: "default",
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+  size: 'default',
+  variant: 'default',
 })
 
 const ToggleGroup = React.forwardRef<
   React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants>
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>
 >(({ className, variant, size, children, ...props }, ref) => (
   <ToggleGroupPrimitive.Root
     ref={ref}
-    className={cn("flex items-center justify-center gap-1", className)}
+    className={cn('flex items-center justify-center gap-1', className)}
     {...props}
   >
-    <ToggleGroupContext.Provider value={{ variant, size }}>
-      {children}
-    </ToggleGroupContext.Provider>
+    <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
   </ToggleGroupPrimitive.Root>
 ))
 
@@ -34,8 +29,7 @@ ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
 
 const ToggleGroupItem = React.forwardRef<
   React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-  VariantProps<typeof toggleVariants>
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>
 >(({ className, children, variant, size, ...props }, ref) => {
   const context = React.useContext(ToggleGroupContext)
 
@@ -47,7 +41,7 @@ const ToggleGroupItem = React.forwardRef<
           variant: context.variant || variant,
           size: context.size || size,
         }),
-        className
+        className,
       )}
       {...props}
     >
diff --git a/docs/www/registry/default/ui/ShadcnUI/toggle.tsx b/docs/www/registry/default/ui/ShadcnUI/toggle.tsx
index b6f2e7d..11324fa 100644
--- a/docs/www/registry/default/ui/ShadcnUI/toggle.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/toggle.tsx
@@ -1,37 +1,35 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react'
+import * as TogglePrimitive from '@radix-ui/react-toggle'
+import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
   {
     variants: {
       variant: {
-        default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+        default: 'bg-transparent',
+        outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
       },
       size: {
-        default: "h-10 px-3",
-        sm: "h-9 px-2.5",
-        lg: "h-11 px-5",
+        default: 'h-10 px-3',
+        sm: 'h-9 px-2.5',
+        lg: 'h-11 px-5',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
-  }
+  },
 )
 
 const Toggle = React.forwardRef<
   React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
 >(({ className, variant, size, ...props }, ref) => (
   <TogglePrimitive.Root
     ref={ref}
diff --git a/docs/www/registry/default/ui/ShadcnUI/tooltip.tsx b/docs/www/registry/default/ui/ShadcnUI/tooltip.tsx
index 30fc44d..08fe308 100644
--- a/docs/www/registry/default/ui/ShadcnUI/tooltip.tsx
+++ b/docs/www/registry/default/ui/ShadcnUI/tooltip.tsx
@@ -1,9 +1,9 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const TooltipProvider = TooltipPrimitive.Provider
 
@@ -19,8 +19,8 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className,
     )}
     {...props}
   />
diff --git a/docs/www/registry/default/ui/ShadcnUI/use-toast.ts b/docs/www/registry/default/ui/ShadcnUI/use-toast.ts
index 83c24fd..18ec7f3 100644
--- a/docs/www/registry/default/ui/ShadcnUI/use-toast.ts
+++ b/docs/www/registry/default/ui/ShadcnUI/use-toast.ts
@@ -1,12 +1,9 @@
-"use client"
+'use client'
 
 // Inspired by react-hot-toast library
-import * as React from "react"
+import * as React from 'react'
 
-import type {
-  ToastActionElement,
-  ToastProps,
-} from "@/registry/default/ui/toast"
+import type { ToastActionElement, ToastProps } from '@/registry/default/ui/toast'
 
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
@@ -19,10 +16,10 @@ type ToasterToast = ToastProps & {
 }
 
 const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
 } as const
 
 let count = 0
@@ -36,20 +33,20 @@ type ActionType = typeof actionTypes
 
 type Action =
   | {
-      type: ActionType["ADD_TOAST"]
+      type: ActionType['ADD_TOAST']
       toast: ToasterToast
     }
   | {
-      type: ActionType["UPDATE_TOAST"]
+      type: ActionType['UPDATE_TOAST']
       toast: Partial<ToasterToast>
     }
   | {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
+      type: ActionType['DISMISS_TOAST']
+      toastId?: ToasterToast['id']
     }
   | {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
+      type: ActionType['REMOVE_TOAST']
+      toastId?: ToasterToast['id']
     }
 
 interface State {
@@ -66,7 +63,7 @@ const addToRemoveQueue = (toastId: string) => {
   const timeout = setTimeout(() => {
     toastTimeouts.delete(toastId)
     dispatch({
-      type: "REMOVE_TOAST",
+      type: 'REMOVE_TOAST',
       toastId: toastId,
     })
   }, TOAST_REMOVE_DELAY)
@@ -76,21 +73,19 @@ const addToRemoveQueue = (toastId: string) => {
 
 export const reducer = (state: State, action: Action): State => {
   switch (action.type) {
-    case "ADD_TOAST":
+    case 'ADD_TOAST':
       return {
         ...state,
         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
       }
 
-    case "UPDATE_TOAST":
+    case 'UPDATE_TOAST':
       return {
         ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
-        ),
+        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
       }
 
-    case "DISMISS_TOAST": {
+    case 'DISMISS_TOAST': {
       const { toastId } = action
 
       // ! Side effects ! - This could be extracted into a dismissToast() action,
@@ -111,11 +106,11 @@ export const reducer = (state: State, action: Action): State => {
                 ...t,
                 open: false,
               }
-            : t
+            : t,
         ),
       }
     }
-    case "REMOVE_TOAST":
+    case 'REMOVE_TOAST':
       if (action.toastId === undefined) {
         return {
           ...state,
@@ -140,20 +135,20 @@ function dispatch(action: Action) {
   })
 }
 
-type Toast = Omit<ToasterToast, "id">
+type Toast = Omit<ToasterToast, 'id'>
 
 function toast({ ...props }: Toast) {
   const id = genId()
 
   const update = (props: ToasterToast) =>
     dispatch({
-      type: "UPDATE_TOAST",
+      type: 'UPDATE_TOAST',
       toast: { ...props, id },
     })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
 
   dispatch({
-    type: "ADD_TOAST",
+    type: 'ADD_TOAST',
     toast: {
       ...props,
       id,
@@ -187,7 +182,7 @@ function useToast() {
   return {
     ...state,
     toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
   }
 }
 
diff --git a/docs/www/registry/registry.ts b/docs/www/registry/registry.ts
index 90cf8eb..d837a88 100644
--- a/docs/www/registry/registry.ts
+++ b/docs/www/registry/registry.ts
@@ -1,5 +1,5 @@
-import { examples } from "@/registry/examples"
-import { Registry } from "@/registry/schema"
-import { ui } from "@/registry/ui"
+import { examples } from '@/registry/examples'
+import { Registry } from '@/registry/schema'
+import { ui } from '@/registry/ui'
 
 export const registry: Registry = [...ui, ...examples]
diff --git a/docs/www/registry/schema.ts b/docs/www/registry/schema.ts
index 429ba0f..09b2193 100644
--- a/docs/www/registry/schema.ts
+++ b/docs/www/registry/schema.ts
@@ -1,4 +1,4 @@
-import { z } from "zod"
+import { z } from 'zod'
 
 export const blockChunkSchema = z.object({
   name: z.string(),
@@ -21,13 +21,7 @@ export const registryEntrySchema = z.object({
   registryDependencies: z.array(z.string()).optional(),
   files: z.array(z.string()),
   source: z.string().optional(),
-  type: z.enum([
-    "components:ui",
-    "components:component",
-    "components:example",
-    "components:block",
-    "components:chart",
-  ]),
+  type: z.enum(['components:ui', 'components:component', 'components:example', 'components:block', 'components:chart']),
   category: z.string().optional(),
   subcategory: z.string().optional(),
   chunks: z.array(blockChunkSchema).optional(),
@@ -40,8 +34,8 @@ export type RegistryEntry = z.infer<typeof registryEntrySchema>
 export type Registry = z.infer<typeof registrySchema>
 
 export const blockSchema = registryEntrySchema.extend({
-  type: z.literal("components:block"),
-  style: z.enum(["default"]),
+  type: z.literal('components:block'),
+  style: z.enum(['default']),
   component: z.any(),
   container: z
     .object({
diff --git a/docs/www/registry/styles.ts b/docs/www/registry/styles.ts
index 7bf3496..89b22c5 100644
--- a/docs/www/registry/styles.ts
+++ b/docs/www/registry/styles.ts
@@ -1,7 +1,7 @@
 export const styles = [
   {
-    name: "default",
-    label: "Default",
+    name: 'default',
+    label: 'Default',
   },
 ] as const
 
diff --git a/docs/www/registry/themes.ts b/docs/www/registry/themes.ts
index f787314..10612b3 100644
--- a/docs/www/registry/themes.ts
+++ b/docs/www/registry/themes.ts
@@ -1,753 +1,753 @@
 export const themes = [
   {
-    name: "zinc",
-    label: "Zinc",
+    name: 'zinc',
+    label: 'Zinc',
     activeColor: {
-      light: "240 5.9% 10%",
-      dark: "240 5.2% 33.9%",
+      light: '240 5.9% 10%',
+      dark: '240 5.2% 33.9%',
     },
     cssVars: {
       light: {
-        background: "0 0% 100%",
-        foreground: "240 10% 3.9%",
-        card: "0 0% 100%",
-        "card-foreground": "240 10% 3.9%",
-        popover: "0 0% 100%",
-        "popover-foreground": "240 10% 3.9%",
-        primary: "240 5.9% 10%",
-        "primary-foreground": "0 0% 98%",
-        secondary: "240 4.8% 95.9%",
-        "secondary-foreground": "240 5.9% 10%",
-        muted: "240 4.8% 95.9%",
-        "muted-foreground": "240 3.8% 46.1%",
-        accent: "240 4.8% 95.9%",
-        "accent-foreground": "240 5.9% 10%",
-        destructive: "0 84.2% 60.2%",
-        "destructive-foreground": "0 0% 98%",
-        border: "240 5.9% 90%",
-        input: "240 5.9% 90%",
-        ring: "240 5.9% 10%",
-        radius: "0.5rem",
-        "chart-1": "12 76% 61%",
-        "chart-2": "173 58% 39%",
-        "chart-3": "197 37% 24%",
-        "chart-4": "43 74% 66%",
-        "chart-5": "27 87% 67%",
+        background: '0 0% 100%',
+        foreground: '240 10% 3.9%',
+        card: '0 0% 100%',
+        'card-foreground': '240 10% 3.9%',
+        popover: '0 0% 100%',
+        'popover-foreground': '240 10% 3.9%',
+        primary: '240 5.9% 10%',
+        'primary-foreground': '0 0% 98%',
+        secondary: '240 4.8% 95.9%',
+        'secondary-foreground': '240 5.9% 10%',
+        muted: '240 4.8% 95.9%',
+        'muted-foreground': '240 3.8% 46.1%',
+        accent: '240 4.8% 95.9%',
+        'accent-foreground': '240 5.9% 10%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '0 0% 98%',
+        border: '240 5.9% 90%',
+        input: '240 5.9% 90%',
+        ring: '240 5.9% 10%',
+        radius: '0.5rem',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
-        background: "240 10% 3.9%",
-        foreground: "0 0% 98%",
-        card: "240 10% 3.9%",
-        "card-foreground": "0 0% 98%",
-        popover: "240 10% 3.9%",
-        "popover-foreground": "0 0% 98%",
-        primary: "0 0% 98%",
-        "primary-foreground": "240 5.9% 10%",
-        secondary: "240 3.7% 15.9%",
-        "secondary-foreground": "0 0% 98%",
-        muted: "240 3.7% 15.9%",
-        "muted-foreground": "240 5% 64.9%",
-        accent: "240 3.7% 15.9%",
-        "accent-foreground": "0 0% 98%",
-        destructive: "0 62.8% 30.6%",
-        "destructive-foreground": "0 0% 98%",
-        border: "240 3.7% 15.9%",
-        input: "240 3.7% 15.9%",
-        ring: "240 4.9% 83.9%",
-        "chart-1": "220 70% 50%",
-        "chart-2": "160 60% 45%",
-        "chart-3": "30 80% 55%",
-        "chart-4": "280 65% 60%",
-        "chart-5": "340 75% 55%",
+        background: '240 10% 3.9%',
+        foreground: '0 0% 98%',
+        card: '240 10% 3.9%',
+        'card-foreground': '0 0% 98%',
+        popover: '240 10% 3.9%',
+        'popover-foreground': '0 0% 98%',
+        primary: '0 0% 98%',
+        'primary-foreground': '240 5.9% 10%',
+        secondary: '240 3.7% 15.9%',
+        'secondary-foreground': '0 0% 98%',
+        muted: '240 3.7% 15.9%',
+        'muted-foreground': '240 5% 64.9%',
+        accent: '240 3.7% 15.9%',
+        'accent-foreground': '0 0% 98%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '0 0% 98%',
+        border: '240 3.7% 15.9%',
+        input: '240 3.7% 15.9%',
+        ring: '240 4.9% 83.9%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
   {
-    name: "slate",
-    label: "Slate",
+    name: 'slate',
+    label: 'Slate',
     activeColor: {
-      light: "215.4 16.3% 46.9%",
-      dark: "215.3 19.3% 34.5%",
+      light: '215.4 16.3% 46.9%',
+      dark: '215.3 19.3% 34.5%',
     },
     cssVars: {
       light: {
-        background: "0 0% 100%",
-        foreground: "222.2 84% 4.9%",
-        card: "0 0% 100%",
-        "card-foreground": "222.2 84% 4.9%",
-        popover: "0 0% 100%",
-        "popover-foreground": "222.2 84% 4.9%",
-        primary: "222.2 47.4% 11.2%",
-        "primary-foreground": "210 40% 98%",
-        secondary: "210 40% 96.1%",
-        "secondary-foreground": "222.2 47.4% 11.2%",
-        muted: "210 40% 96.1%",
-        "muted-foreground": "215.4 16.3% 46.9%",
-        accent: "210 40% 96.1%",
-        "accent-foreground": "222.2 47.4% 11.2%",
-        destructive: "0 84.2% 60.2%",
-        "destructive-foreground": "210 40% 98%",
-        border: "214.3 31.8% 91.4%",
-        input: "214.3 31.8% 91.4%",
-        ring: "222.2 84% 4.9%",
-        radius: "0.5rem",
-        "chart-1": "12 76% 61%",
-        "chart-2": "173 58% 39%",
-        "chart-3": "197 37% 24%",
-        "chart-4": "43 74% 66%",
-        "chart-5": "27 87% 67%",
+        background: '0 0% 100%',
+        foreground: '222.2 84% 4.9%',
+        card: '0 0% 100%',
+        'card-foreground': '222.2 84% 4.9%',
+        popover: '0 0% 100%',
+        'popover-foreground': '222.2 84% 4.9%',
+        primary: '222.2 47.4% 11.2%',
+        'primary-foreground': '210 40% 98%',
+        secondary: '210 40% 96.1%',
+        'secondary-foreground': '222.2 47.4% 11.2%',
+        muted: '210 40% 96.1%',
+        'muted-foreground': '215.4 16.3% 46.9%',
+        accent: '210 40% 96.1%',
+        'accent-foreground': '222.2 47.4% 11.2%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '210 40% 98%',
+        border: '214.3 31.8% 91.4%',
+        input: '214.3 31.8% 91.4%',
+        ring: '222.2 84% 4.9%',
+        radius: '0.5rem',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
-        background: "222.2 84% 4.9%",
-        foreground: "210 40% 98%",
-        card: "222.2 84% 4.9%",
-        "card-foreground": "210 40% 98%",
-        popover: "222.2 84% 4.9%",
-        "popover-foreground": "210 40% 98%",
-        primary: "210 40% 98%",
-        "primary-foreground": "222.2 47.4% 11.2%",
-        secondary: "217.2 32.6% 17.5%",
-        "secondary-foreground": "210 40% 98%",
-        muted: "217.2 32.6% 17.5%",
-        "muted-foreground": "215 20.2% 65.1%",
-        accent: "217.2 32.6% 17.5%",
-        "accent-foreground": "210 40% 98%",
-        destructive: "0 62.8% 30.6%",
-        "destructive-foreground": "210 40% 98%",
-        border: "217.2 32.6% 17.5%",
-        input: "217.2 32.6% 17.5%",
-        ring: "212.7 26.8% 83.9",
-        "chart-1": "220 70% 50%",
-        "chart-2": "160 60% 45%",
-        "chart-3": "30 80% 55%",
-        "chart-4": "280 65% 60%",
-        "chart-5": "340 75% 55%",
+        background: '222.2 84% 4.9%',
+        foreground: '210 40% 98%',
+        card: '222.2 84% 4.9%',
+        'card-foreground': '210 40% 98%',
+        popover: '222.2 84% 4.9%',
+        'popover-foreground': '210 40% 98%',
+        primary: '210 40% 98%',
+        'primary-foreground': '222.2 47.4% 11.2%',
+        secondary: '217.2 32.6% 17.5%',
+        'secondary-foreground': '210 40% 98%',
+        muted: '217.2 32.6% 17.5%',
+        'muted-foreground': '215 20.2% 65.1%',
+        accent: '217.2 32.6% 17.5%',
+        'accent-foreground': '210 40% 98%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '210 40% 98%',
+        border: '217.2 32.6% 17.5%',
+        input: '217.2 32.6% 17.5%',
+        ring: '212.7 26.8% 83.9',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
   {
-    name: "stone",
-    label: "Stone",
+    name: 'stone',
+    label: 'Stone',
     activeColor: {
-      light: "25 5.3% 44.7%",
-      dark: "33.3 5.5% 32.4%",
+      light: '25 5.3% 44.7%',
+      dark: '33.3 5.5% 32.4%',
     },
     cssVars: {
       light: {
-        background: "0 0% 100%",
-        foreground: "20 14.3% 4.1%",
-        card: "0 0% 100%",
-        "card-foreground": "20 14.3% 4.1%",
-        popover: "0 0% 100%",
-        "popover-foreground": "20 14.3% 4.1%",
-        primary: "24 9.8% 10%",
-        "primary-foreground": "60 9.1% 97.8%",
-        secondary: "60 4.8% 95.9%",
-        "secondary-foreground": "24 9.8% 10%",
-        muted: "60 4.8% 95.9%",
-        "muted-foreground": "25 5.3% 44.7%",
-        accent: "60 4.8% 95.9%",
-        "accent-foreground": "24 9.8% 10%",
-        destructive: "0 84.2% 60.2%",
-        "destructive-foreground": "60 9.1% 97.8%",
-        border: "20 5.9% 90%",
-        input: "20 5.9% 90%",
-        ring: "20 14.3% 4.1%",
-        radius: "0.95rem",
-        "chart-1": "12 76% 61%",
-        "chart-2": "173 58% 39%",
-        "chart-3": "197 37% 24%",
-        "chart-4": "43 74% 66%",
-        "chart-5": "27 87% 67%",
+        background: '0 0% 100%',
+        foreground: '20 14.3% 4.1%',
+        card: '0 0% 100%',
+        'card-foreground': '20 14.3% 4.1%',
+        popover: '0 0% 100%',
+        'popover-foreground': '20 14.3% 4.1%',
+        primary: '24 9.8% 10%',
+        'primary-foreground': '60 9.1% 97.8%',
+        secondary: '60 4.8% 95.9%',
+        'secondary-foreground': '24 9.8% 10%',
+        muted: '60 4.8% 95.9%',
+        'muted-foreground': '25 5.3% 44.7%',
+        accent: '60 4.8% 95.9%',
+        'accent-foreground': '24 9.8% 10%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '60 9.1% 97.8%',
+        border: '20 5.9% 90%',
+        input: '20 5.9% 90%',
+        ring: '20 14.3% 4.1%',
+        radius: '0.95rem',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
-        background: "20 14.3% 4.1%",
-        foreground: "60 9.1% 97.8%",
-        card: "20 14.3% 4.1%",
-        "card-foreground": "60 9.1% 97.8%",
-        popover: "20 14.3% 4.1%",
-        "popover-foreground": "60 9.1% 97.8%",
-        primary: "60 9.1% 97.8%",
-        "primary-foreground": "24 9.8% 10%",
-        secondary: "12 6.5% 15.1%",
-        "secondary-foreground": "60 9.1% 97.8%",
-        muted: "12 6.5% 15.1%",
-        "muted-foreground": "24 5.4% 63.9%",
-        accent: "12 6.5% 15.1%",
-        "accent-foreground": "60 9.1% 97.8%",
-        destructive: "0 62.8% 30.6%",
-        "destructive-foreground": "60 9.1% 97.8%",
-        border: "12 6.5% 15.1%",
-        input: "12 6.5% 15.1%",
-        ring: "24 5.7% 82.9%",
-        "chart-1": "220 70% 50%",
-        "chart-2": "160 60% 45%",
-        "chart-3": "30 80% 55%",
-        "chart-4": "280 65% 60%",
-        "chart-5": "340 75% 55%",
+        background: '20 14.3% 4.1%',
+        foreground: '60 9.1% 97.8%',
+        card: '20 14.3% 4.1%',
+        'card-foreground': '60 9.1% 97.8%',
+        popover: '20 14.3% 4.1%',
+        'popover-foreground': '60 9.1% 97.8%',
+        primary: '60 9.1% 97.8%',
+        'primary-foreground': '24 9.8% 10%',
+        secondary: '12 6.5% 15.1%',
+        'secondary-foreground': '60 9.1% 97.8%',
+        muted: '12 6.5% 15.1%',
+        'muted-foreground': '24 5.4% 63.9%',
+        accent: '12 6.5% 15.1%',
+        'accent-foreground': '60 9.1% 97.8%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '60 9.1% 97.8%',
+        border: '12 6.5% 15.1%',
+        input: '12 6.5% 15.1%',
+        ring: '24 5.7% 82.9%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
   {
-    name: "gray",
-    label: "Gray",
+    name: 'gray',
+    label: 'Gray',
     activeColor: {
-      light: "220 8.9% 46.1%",
-      dark: "215 13.8% 34.1%",
+      light: '220 8.9% 46.1%',
+      dark: '215 13.8% 34.1%',
     },
     cssVars: {
       light: {
-        background: "0 0% 100%",
-        foreground: "224 71.4% 4.1%",
-        card: "0 0% 100%",
-        "card-foreground": "224 71.4% 4.1%",
-        popover: "0 0% 100%",
-        "popover-foreground": "224 71.4% 4.1%",
-        primary: "220.9 39.3% 11%",
-        "primary-foreground": "210 20% 98%",
-        secondary: "220 14.3% 95.9%",
-        "secondary-foreground": "220.9 39.3% 11%",
-        muted: "220 14.3% 95.9%",
-        "muted-foreground": "220 8.9% 46.1%",
-        accent: "220 14.3% 95.9%",
-        "accent-foreground": "220.9 39.3% 11%",
-        destructive: "0 84.2% 60.2%",
-        "destructive-foreground": "210 20% 98%",
-        border: "220 13% 91%",
-        input: "220 13% 91%",
-        ring: "224 71.4% 4.1%",
-        radius: "0.35rem",
-        "chart-1": "12 76% 61%",
-        "chart-2": "173 58% 39%",
-        "chart-3": "197 37% 24%",
-        "chart-4": "43 74% 66%",
-        "chart-5": "27 87% 67%",
+        background: '0 0% 100%',
+        foreground: '224 71.4% 4.1%',
+        card: '0 0% 100%',
+        'card-foreground': '224 71.4% 4.1%',
+        popover: '0 0% 100%',
+        'popover-foreground': '224 71.4% 4.1%',
+        primary: '220.9 39.3% 11%',
+        'primary-foreground': '210 20% 98%',
+        secondary: '220 14.3% 95.9%',
+        'secondary-foreground': '220.9 39.3% 11%',
+        muted: '220 14.3% 95.9%',
+        'muted-foreground': '220 8.9% 46.1%',
+        accent: '220 14.3% 95.9%',
+        'accent-foreground': '220.9 39.3% 11%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '210 20% 98%',
+        border: '220 13% 91%',
+        input: '220 13% 91%',
+        ring: '224 71.4% 4.1%',
+        radius: '0.35rem',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
-        background: "224 71.4% 4.1%",
-        foreground: "210 20% 98%",
-        card: "224 71.4% 4.1%",
-        "card-foreground": "210 20% 98%",
-        popover: "224 71.4% 4.1%",
-        "popover-foreground": "210 20% 98%",
-        primary: "210 20% 98%",
-        "primary-foreground": "220.9 39.3% 11%",
-        secondary: "215 27.9% 16.9%",
-        "secondary-foreground": "210 20% 98%",
-        muted: "215 27.9% 16.9%",
-        "muted-foreground": "217.9 10.6% 64.9%",
-        accent: "215 27.9% 16.9%",
-        "accent-foreground": "210 20% 98%",
-        destructive: "0 62.8% 30.6%",
-        "destructive-foreground": "210 20% 98%",
-        border: "215 27.9% 16.9%",
-        input: "215 27.9% 16.9%",
-        ring: "216 12.2% 83.9%",
-        "chart-1": "220 70% 50%",
-        "chart-2": "160 60% 45%",
-        "chart-3": "30 80% 55%",
-        "chart-4": "280 65% 60%",
-        "chart-5": "340 75% 55%",
+        background: '224 71.4% 4.1%',
+        foreground: '210 20% 98%',
+        card: '224 71.4% 4.1%',
+        'card-foreground': '210 20% 98%',
+        popover: '224 71.4% 4.1%',
+        'popover-foreground': '210 20% 98%',
+        primary: '210 20% 98%',
+        'primary-foreground': '220.9 39.3% 11%',
+        secondary: '215 27.9% 16.9%',
+        'secondary-foreground': '210 20% 98%',
+        muted: '215 27.9% 16.9%',
+        'muted-foreground': '217.9 10.6% 64.9%',
+        accent: '215 27.9% 16.9%',
+        'accent-foreground': '210 20% 98%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '210 20% 98%',
+        border: '215 27.9% 16.9%',
+        input: '215 27.9% 16.9%',
+        ring: '216 12.2% 83.9%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
   {
-    name: "neutral",
-    label: "Neutral",
+    name: 'neutral',
+    label: 'Neutral',
     activeColor: {
-      light: "0 0% 45.1%",
-      dark: "0 0% 32.2%",
+      light: '0 0% 45.1%',
+      dark: '0 0% 32.2%',
     },
     cssVars: {
       light: {
-        background: "0 0% 100%",
-        foreground: "0 0% 3.9%",
-        card: "0 0% 100%",
-        "card-foreground": "0 0% 3.9%",
-        popover: "0 0% 100%",
-        "popover-foreground": "0 0% 3.9%",
-        primary: "0 0% 9%",
-        "primary-foreground": "0 0% 98%",
-        secondary: "0 0% 96.1%",
-        "secondary-foreground": "0 0% 9%",
-        muted: "0 0% 96.1%",
-        "muted-foreground": "0 0% 45.1%",
-        accent: "0 0% 96.1%",
-        "accent-foreground": "0 0% 9%",
-        destructive: "0 84.2% 60.2%",
-        "destructive-foreground": "0 0% 98%",
-        border: "0 0% 89.8%",
-        input: "0 0% 89.8%",
-        ring: "0 0% 3.9%",
-        "chart-1": "12 76% 61%",
-        "chart-2": "173 58% 39%",
-        "chart-3": "197 37% 24%",
-        "chart-4": "43 74% 66%",
-        "chart-5": "27 87% 67%",
+        background: '0 0% 100%',
+        foreground: '0 0% 3.9%',
+        card: '0 0% 100%',
+        'card-foreground': '0 0% 3.9%',
+        popover: '0 0% 100%',
+        'popover-foreground': '0 0% 3.9%',
+        primary: '0 0% 9%',
+        'primary-foreground': '0 0% 98%',
+        secondary: '0 0% 96.1%',
+        'secondary-foreground': '0 0% 9%',
+        muted: '0 0% 96.1%',
+        'muted-foreground': '0 0% 45.1%',
+        accent: '0 0% 96.1%',
+        'accent-foreground': '0 0% 9%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '0 0% 98%',
+        border: '0 0% 89.8%',
+        input: '0 0% 89.8%',
+        ring: '0 0% 3.9%',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
-        background: "0 0% 3.9%",
-        foreground: "0 0% 98%",
-        card: "0 0% 3.9%",
-        "card-foreground": "0 0% 98%",
-        popover: "0 0% 3.9%",
-        "popover-foreground": "0 0% 98%",
-        primary: "0 0% 98%",
-        "primary-foreground": "0 0% 9%",
-        secondary: "0 0% 14.9%",
-        "secondary-foreground": "0 0% 98%",
-        muted: "0 0% 14.9%",
-        "muted-foreground": "0 0% 63.9%",
-        accent: "0 0% 14.9%",
-        "accent-foreground": "0 0% 98%",
-        destructive: "0 62.8% 30.6%",
-        "destructive-foreground": "0 0% 98%",
-        border: "0 0% 14.9%",
-        input: "0 0% 14.9%",
-        ring: "0 0% 83.1%",
-        "chart-1": "220 70% 50%",
-        "chart-2": "160 60% 45%",
-        "chart-3": "30 80% 55%",
-        "chart-4": "280 65% 60%",
-        "chart-5": "340 75% 55%",
+        background: '0 0% 3.9%',
+        foreground: '0 0% 98%',
+        card: '0 0% 3.9%',
+        'card-foreground': '0 0% 98%',
+        popover: '0 0% 3.9%',
+        'popover-foreground': '0 0% 98%',
+        primary: '0 0% 98%',
+        'primary-foreground': '0 0% 9%',
+        secondary: '0 0% 14.9%',
+        'secondary-foreground': '0 0% 98%',
+        muted: '0 0% 14.9%',
+        'muted-foreground': '0 0% 63.9%',
+        accent: '0 0% 14.9%',
+        'accent-foreground': '0 0% 98%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '0 0% 98%',
+        border: '0 0% 14.9%',
+        input: '0 0% 14.9%',
+        ring: '0 0% 83.1%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
   {
-    name: "red",
-    label: "Red",
+    name: 'red',
+    label: 'Red',
     activeColor: {
-      light: "0 72.2% 50.6%",
-      dark: "0 72.2% 50.6%",
+      light: '0 72.2% 50.6%',
+      dark: '0 72.2% 50.6%',
     },
     cssVars: {
       light: {
-        background: "0 0% 100%",
-        foreground: "0 0% 3.9%",
-        card: "0 0% 100%",
-        "card-foreground": "0 0% 3.9%",
-        popover: "0 0% 100%",
-        "popover-foreground": "0 0% 3.9%",
-        primary: "0 72.2% 50.6%",
-        "primary-foreground": "0 85.7% 97.3%",
-        secondary: "0 0% 96.1%",
-        "secondary-foreground": "0 0% 9%",
-        muted: "0 0% 96.1%",
-        "muted-foreground": "0 0% 45.1%",
-        accent: "0 0% 96.1%",
-        "accent-foreground": "0 0% 9%",
-        destructive: "0 84.2% 60.2%",
-        "destructive-foreground": "0 0% 98%",
-        border: "0 0% 89.8%",
-        input: "0 0% 89.8%",
-        ring: "0 72.2% 50.6%",
-        radius: "0.4rem",
-        "chart-1": "12 76% 61%",
-        "chart-2": "173 58% 39%",
-        "chart-3": "197 37% 24%",
-        "chart-4": "43 74% 66%",
-        "chart-5": "27 87% 67%",
+        background: '0 0% 100%',
+        foreground: '0 0% 3.9%',
+        card: '0 0% 100%',
+        'card-foreground': '0 0% 3.9%',
+        popover: '0 0% 100%',
+        'popover-foreground': '0 0% 3.9%',
+        primary: '0 72.2% 50.6%',
+        'primary-foreground': '0 85.7% 97.3%',
+        secondary: '0 0% 96.1%',
+        'secondary-foreground': '0 0% 9%',
+        muted: '0 0% 96.1%',
+        'muted-foreground': '0 0% 45.1%',
+        accent: '0 0% 96.1%',
+        'accent-foreground': '0 0% 9%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '0 0% 98%',
+        border: '0 0% 89.8%',
+        input: '0 0% 89.8%',
+        ring: '0 72.2% 50.6%',
+        radius: '0.4rem',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
-        background: "0 0% 3.9%",
-        foreground: "0 0% 98%",
-        card: "0 0% 3.9%",
-        "card-foreground": "0 0% 98%",
-        popover: "0 0% 3.9%",
-        "popover-foreground": "0 0% 98%",
-        primary: "0 72.2% 50.6%",
-        "primary-foreground": "0 85.7% 97.3%",
-        secondary: "0 0% 14.9%",
-        "secondary-foreground": "0 0% 98%",
-        muted: "0 0% 14.9%",
-        "muted-foreground": "0 0% 63.9%",
-        accent: "0 0% 14.9%",
-        "accent-foreground": "0 0% 98%",
-        destructive: "0 62.8% 30.6%",
-        "destructive-foreground": "0 0% 98%",
-        border: "0 0% 14.9%",
-        input: "0 0% 14.9%",
-        ring: "0 72.2% 50.6%",
-        "chart-1": "220 70% 50%",
-        "chart-2": "160 60% 45%",
-        "chart-3": "30 80% 55%",
-        "chart-4": "280 65% 60%",
-        "chart-5": "340 75% 55%",
+        background: '0 0% 3.9%',
+        foreground: '0 0% 98%',
+        card: '0 0% 3.9%',
+        'card-foreground': '0 0% 98%',
+        popover: '0 0% 3.9%',
+        'popover-foreground': '0 0% 98%',
+        primary: '0 72.2% 50.6%',
+        'primary-foreground': '0 85.7% 97.3%',
+        secondary: '0 0% 14.9%',
+        'secondary-foreground': '0 0% 98%',
+        muted: '0 0% 14.9%',
+        'muted-foreground': '0 0% 63.9%',
+        accent: '0 0% 14.9%',
+        'accent-foreground': '0 0% 98%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '0 0% 98%',
+        border: '0 0% 14.9%',
+        input: '0 0% 14.9%',
+        ring: '0 72.2% 50.6%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
   {
-    name: "rose",
-    label: "Rose",
+    name: 'rose',
+    label: 'Rose',
     activeColor: {
-      light: "346.8 77.2% 49.8%",
-      dark: "346.8 77.2% 49.8%",
+      light: '346.8 77.2% 49.8%',
+      dark: '346.8 77.2% 49.8%',
     },
     cssVars: {
       light: {
-        background: "0 0% 100%",
-        foreground: "240 10% 3.9%",
-        card: "0 0% 100%",
-        "card-foreground": "240 10% 3.9%",
-        popover: "0 0% 100%",
-        "popover-foreground": "240 10% 3.9%",
-        primary: "346.8 77.2% 49.8%",
-        "primary-foreground": "355.7 100% 97.3%",
-        secondary: "240 4.8% 95.9%",
-        "secondary-foreground": "240 5.9% 10%",
-        muted: "240 4.8% 95.9%",
-        "muted-foreground": "240 3.8% 46.1%",
-        accent: "240 4.8% 95.9%",
-        "accent-foreground": "240 5.9% 10%",
-        destructive: "0 84.2% 60.2%",
-        "destructive-foreground": "0 0% 98%",
-        border: "240 5.9% 90%",
-        input: "240 5.9% 90%",
-        ring: "346.8 77.2% 49.8%",
-        radius: "0.5rem",
-        "chart-1": "12 76% 61%",
-        "chart-2": "173 58% 39%",
-        "chart-3": "197 37% 24%",
-        "chart-4": "43 74% 66%",
-        "chart-5": "27 87% 67%",
+        background: '0 0% 100%',
+        foreground: '240 10% 3.9%',
+        card: '0 0% 100%',
+        'card-foreground': '240 10% 3.9%',
+        popover: '0 0% 100%',
+        'popover-foreground': '240 10% 3.9%',
+        primary: '346.8 77.2% 49.8%',
+        'primary-foreground': '355.7 100% 97.3%',
+        secondary: '240 4.8% 95.9%',
+        'secondary-foreground': '240 5.9% 10%',
+        muted: '240 4.8% 95.9%',
+        'muted-foreground': '240 3.8% 46.1%',
+        accent: '240 4.8% 95.9%',
+        'accent-foreground': '240 5.9% 10%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '0 0% 98%',
+        border: '240 5.9% 90%',
+        input: '240 5.9% 90%',
+        ring: '346.8 77.2% 49.8%',
+        radius: '0.5rem',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
-        background: "20 14.3% 4.1%",
-        foreground: "0 0% 95%",
-        popover: "0 0% 9%",
-        "popover-foreground": "0 0% 95%",
-        card: "24 9.8% 10%",
-        "card-foreground": "0 0% 95%",
-        primary: "346.8 77.2% 49.8%",
-        "primary-foreground": "355.7 100% 97.3%",
-        secondary: "240 3.7% 15.9%",
-        "secondary-foreground": "0 0% 98%",
-        muted: "0 0% 15%",
-        "muted-foreground": "240 5% 64.9%",
-        accent: "12 6.5% 15.1%",
-        "accent-foreground": "0 0% 98%",
-        destructive: "0 62.8% 30.6%",
-        "destructive-foreground": "0 85.7% 97.3%",
-        border: "240 3.7% 15.9%",
-        input: "240 3.7% 15.9%",
-        ring: "346.8 77.2% 49.8%",
-        "chart-1": "220 70% 50%",
-        "chart-2": "160 60% 45%",
-        "chart-3": "30 80% 55%",
-        "chart-4": "280 65% 60%",
-        "chart-5": "340 75% 55%",
+        background: '20 14.3% 4.1%',
+        foreground: '0 0% 95%',
+        popover: '0 0% 9%',
+        'popover-foreground': '0 0% 95%',
+        card: '24 9.8% 10%',
+        'card-foreground': '0 0% 95%',
+        primary: '346.8 77.2% 49.8%',
+        'primary-foreground': '355.7 100% 97.3%',
+        secondary: '240 3.7% 15.9%',
+        'secondary-foreground': '0 0% 98%',
+        muted: '0 0% 15%',
+        'muted-foreground': '240 5% 64.9%',
+        accent: '12 6.5% 15.1%',
+        'accent-foreground': '0 0% 98%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '0 85.7% 97.3%',
+        border: '240 3.7% 15.9%',
+        input: '240 3.7% 15.9%',
+        ring: '346.8 77.2% 49.8%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
   {
-    name: "orange",
-    label: "Orange",
+    name: 'orange',
+    label: 'Orange',
     activeColor: {
-      light: "24.6 95% 53.1%",
-      dark: "20.5 90.2% 48.2%",
+      light: '24.6 95% 53.1%',
+      dark: '20.5 90.2% 48.2%',
     },
     cssVars: {
       light: {
-        background: "0 0% 100%",
-        foreground: "20 14.3% 4.1%",
-        card: "0 0% 100%",
-        "card-foreground": "20 14.3% 4.1%",
-        popover: "0 0% 100%",
-        "popover-foreground": "20 14.3% 4.1%",
-        primary: "24.6 95% 53.1%",
-        "primary-foreground": "60 9.1% 97.8%",
-        secondary: "60 4.8% 95.9%",
-        "secondary-foreground": "24 9.8% 10%",
-        muted: "60 4.8% 95.9%",
-        "muted-foreground": "25 5.3% 44.7%",
-        accent: "60 4.8% 95.9%",
-        "accent-foreground": "24 9.8% 10%",
-        destructive: "0 84.2% 60.2%",
-        "destructive-foreground": "60 9.1% 97.8%",
-        border: "20 5.9% 90%",
-        input: "20 5.9% 90%",
-        ring: "24.6 95% 53.1%",
-        radius: "0.95rem",
-        "chart-1": "12 76% 61%",
-        "chart-2": "173 58% 39%",
-        "chart-3": "197 37% 24%",
-        "chart-4": "43 74% 66%",
-        "chart-5": "27 87% 67%",
+        background: '0 0% 100%',
+        foreground: '20 14.3% 4.1%',
+        card: '0 0% 100%',
+        'card-foreground': '20 14.3% 4.1%',
+        popover: '0 0% 100%',
+        'popover-foreground': '20 14.3% 4.1%',
+        primary: '24.6 95% 53.1%',
+        'primary-foreground': '60 9.1% 97.8%',
+        secondary: '60 4.8% 95.9%',
+        'secondary-foreground': '24 9.8% 10%',
+        muted: '60 4.8% 95.9%',
+        'muted-foreground': '25 5.3% 44.7%',
+        accent: '60 4.8% 95.9%',
+        'accent-foreground': '24 9.8% 10%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '60 9.1% 97.8%',
+        border: '20 5.9% 90%',
+        input: '20 5.9% 90%',
+        ring: '24.6 95% 53.1%',
+        radius: '0.95rem',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
-        background: "20 14.3% 4.1%",
-        foreground: "60 9.1% 97.8%",
-        card: "20 14.3% 4.1%",
-        "card-foreground": "60 9.1% 97.8%",
-        popover: "20 14.3% 4.1%",
-        "popover-foreground": "60 9.1% 97.8%",
-        primary: "20.5 90.2% 48.2%",
-        "primary-foreground": "60 9.1% 97.8%",
-        secondary: "12 6.5% 15.1%",
-        "secondary-foreground": "60 9.1% 97.8%",
-        muted: "12 6.5% 15.1%",
-        "muted-foreground": "24 5.4% 63.9%",
-        accent: "12 6.5% 15.1%",
-        "accent-foreground": "60 9.1% 97.8%",
-        destructive: "0 72.2% 50.6%",
-        "destructive-foreground": "60 9.1% 97.8%",
-        border: "12 6.5% 15.1%",
-        input: "12 6.5% 15.1%",
-        ring: "20.5 90.2% 48.2%",
-        "chart-1": "220 70% 50%",
-        "chart-2": "160 60% 45%",
-        "chart-3": "30 80% 55%",
-        "chart-4": "280 65% 60%",
-        "chart-5": "340 75% 55%",
+        background: '20 14.3% 4.1%',
+        foreground: '60 9.1% 97.8%',
+        card: '20 14.3% 4.1%',
+        'card-foreground': '60 9.1% 97.8%',
+        popover: '20 14.3% 4.1%',
+        'popover-foreground': '60 9.1% 97.8%',
+        primary: '20.5 90.2% 48.2%',
+        'primary-foreground': '60 9.1% 97.8%',
+        secondary: '12 6.5% 15.1%',
+        'secondary-foreground': '60 9.1% 97.8%',
+        muted: '12 6.5% 15.1%',
+        'muted-foreground': '24 5.4% 63.9%',
+        accent: '12 6.5% 15.1%',
+        'accent-foreground': '60 9.1% 97.8%',
+        destructive: '0 72.2% 50.6%',
+        'destructive-foreground': '60 9.1% 97.8%',
+        border: '12 6.5% 15.1%',
+        input: '12 6.5% 15.1%',
+        ring: '20.5 90.2% 48.2%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
   {
-    name: "green",
-    label: "Green",
+    name: 'green',
+    label: 'Green',
     activeColor: {
-      light: "142.1 76.2% 36.3%",
-      dark: "142.1 70.6% 45.3%",
+      light: '142.1 76.2% 36.3%',
+      dark: '142.1 70.6% 45.3%',
     },
     cssVars: {
       light: {
-        background: "0 0% 100%",
-        foreground: "240 10% 3.9%",
-        card: "0 0% 100%",
-        "card-foreground": "240 10% 3.9%",
-        popover: "0 0% 100%",
-        "popover-foreground": "240 10% 3.9%",
-        primary: "142.1 76.2% 36.3%",
-        "primary-foreground": "355.7 100% 97.3%",
-        secondary: "240 4.8% 95.9%",
-        "secondary-foreground": "240 5.9% 10%",
-        muted: "240 4.8% 95.9%",
-        "muted-foreground": "240 3.8% 46.1%",
-        accent: "240 4.8% 95.9%",
-        "accent-foreground": "240 5.9% 10%",
-        destructive: "0 84.2% 60.2%",
-        "destructive-foreground": "0 0% 98%",
-        border: "240 5.9% 90%",
-        input: "240 5.9% 90%",
-        ring: "142.1 76.2% 36.3%",
-        "chart-1": "12 76% 61%",
-        "chart-2": "173 58% 39%",
-        "chart-3": "197 37% 24%",
-        "chart-4": "43 74% 66%",
-        "chart-5": "27 87% 67%",
+        background: '0 0% 100%',
+        foreground: '240 10% 3.9%',
+        card: '0 0% 100%',
+        'card-foreground': '240 10% 3.9%',
+        popover: '0 0% 100%',
+        'popover-foreground': '240 10% 3.9%',
+        primary: '142.1 76.2% 36.3%',
+        'primary-foreground': '355.7 100% 97.3%',
+        secondary: '240 4.8% 95.9%',
+        'secondary-foreground': '240 5.9% 10%',
+        muted: '240 4.8% 95.9%',
+        'muted-foreground': '240 3.8% 46.1%',
+        accent: '240 4.8% 95.9%',
+        'accent-foreground': '240 5.9% 10%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '0 0% 98%',
+        border: '240 5.9% 90%',
+        input: '240 5.9% 90%',
+        ring: '142.1 76.2% 36.3%',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
-        background: "20 14.3% 4.1%",
-        foreground: "0 0% 95%",
-        popover: "0 0% 9%",
-        "popover-foreground": "0 0% 95%",
-        card: "24 9.8% 10%",
-        "card-foreground": "0 0% 95%",
-        primary: "142.1 70.6% 45.3%",
-        "primary-foreground": "144.9 80.4% 10%",
-        secondary: "240 3.7% 15.9%",
-        "secondary-foreground": "0 0% 98%",
-        muted: "0 0% 15%",
-        "muted-foreground": "240 5% 64.9%",
-        accent: "12 6.5% 15.1%",
-        "accent-foreground": "0 0% 98%",
-        destructive: "0 62.8% 30.6%",
-        "destructive-foreground": "0 85.7% 97.3%",
-        border: "240 3.7% 15.9%",
-        input: "240 3.7% 15.9%",
-        ring: "142.4 71.8% 29.2%",
-        "chart-1": "220 70% 50%",
-        "chart-2": "160 60% 45%",
-        "chart-3": "30 80% 55%",
-        "chart-4": "280 65% 60%",
-        "chart-5": "340 75% 55%",
+        background: '20 14.3% 4.1%',
+        foreground: '0 0% 95%',
+        popover: '0 0% 9%',
+        'popover-foreground': '0 0% 95%',
+        card: '24 9.8% 10%',
+        'card-foreground': '0 0% 95%',
+        primary: '142.1 70.6% 45.3%',
+        'primary-foreground': '144.9 80.4% 10%',
+        secondary: '240 3.7% 15.9%',
+        'secondary-foreground': '0 0% 98%',
+        muted: '0 0% 15%',
+        'muted-foreground': '240 5% 64.9%',
+        accent: '12 6.5% 15.1%',
+        'accent-foreground': '0 0% 98%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '0 85.7% 97.3%',
+        border: '240 3.7% 15.9%',
+        input: '240 3.7% 15.9%',
+        ring: '142.4 71.8% 29.2%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
   {
-    name: "blue",
-    label: "Blue",
+    name: 'blue',
+    label: 'Blue',
     activeColor: {
-      light: "221.2 83.2% 53.3%",
-      dark: "217.2 91.2% 59.8%",
+      light: '221.2 83.2% 53.3%',
+      dark: '217.2 91.2% 59.8%',
     },
     cssVars: {
       light: {
-        background: "0 0% 100%",
-        foreground: "222.2 84% 4.9%",
-        card: "0 0% 100%",
-        "card-foreground": "222.2 84% 4.9%",
-        popover: "0 0% 100%",
-        "popover-foreground": "222.2 84% 4.9%",
-        primary: "221.2 83.2% 53.3%",
-        "primary-foreground": "210 40% 98%",
-        secondary: "210 40% 96.1%",
-        "secondary-foreground": "222.2 47.4% 11.2%",
-        muted: "210 40% 96.1%",
-        "muted-foreground": "215.4 16.3% 46.9%",
-        accent: "210 40% 96.1%",
-        "accent-foreground": "222.2 47.4% 11.2%",
-        destructive: "0 84.2% 60.2%",
-        "destructive-foreground": "210 40% 98%",
-        border: "214.3 31.8% 91.4%",
-        input: "214.3 31.8% 91.4%",
-        ring: "221.2 83.2% 53.3%",
-        "chart-1": "12 76% 61%",
-        "chart-2": "173 58% 39%",
-        "chart-3": "197 37% 24%",
-        "chart-4": "43 74% 66%",
-        "chart-5": "27 87% 67%",
+        background: '0 0% 100%',
+        foreground: '222.2 84% 4.9%',
+        card: '0 0% 100%',
+        'card-foreground': '222.2 84% 4.9%',
+        popover: '0 0% 100%',
+        'popover-foreground': '222.2 84% 4.9%',
+        primary: '221.2 83.2% 53.3%',
+        'primary-foreground': '210 40% 98%',
+        secondary: '210 40% 96.1%',
+        'secondary-foreground': '222.2 47.4% 11.2%',
+        muted: '210 40% 96.1%',
+        'muted-foreground': '215.4 16.3% 46.9%',
+        accent: '210 40% 96.1%',
+        'accent-foreground': '222.2 47.4% 11.2%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '210 40% 98%',
+        border: '214.3 31.8% 91.4%',
+        input: '214.3 31.8% 91.4%',
+        ring: '221.2 83.2% 53.3%',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
-        background: "222.2 84% 4.9%",
-        foreground: "210 40% 98%",
-        card: "222.2 84% 4.9%",
-        "card-foreground": "210 40% 98%",
-        popover: "222.2 84% 4.9%",
-        "popover-foreground": "210 40% 98%",
-        primary: "217.2 91.2% 59.8%",
-        "primary-foreground": "222.2 47.4% 11.2%",
-        secondary: "217.2 32.6% 17.5%",
-        "secondary-foreground": "210 40% 98%",
-        muted: "217.2 32.6% 17.5%",
-        "muted-foreground": "215 20.2% 65.1%",
-        accent: "217.2 32.6% 17.5%",
-        "accent-foreground": "210 40% 98%",
-        destructive: "0 62.8% 30.6%",
-        "destructive-foreground": "210 40% 98%",
-        border: "217.2 32.6% 17.5%",
-        input: "217.2 32.6% 17.5%",
-        ring: "224.3 76.3% 48%",
-        "chart-1": "220 70% 50%",
-        "chart-2": "160 60% 45%",
-        "chart-3": "30 80% 55%",
-        "chart-4": "280 65% 60%",
-        "chart-5": "340 75% 55%",
+        background: '222.2 84% 4.9%',
+        foreground: '210 40% 98%',
+        card: '222.2 84% 4.9%',
+        'card-foreground': '210 40% 98%',
+        popover: '222.2 84% 4.9%',
+        'popover-foreground': '210 40% 98%',
+        primary: '217.2 91.2% 59.8%',
+        'primary-foreground': '222.2 47.4% 11.2%',
+        secondary: '217.2 32.6% 17.5%',
+        'secondary-foreground': '210 40% 98%',
+        muted: '217.2 32.6% 17.5%',
+        'muted-foreground': '215 20.2% 65.1%',
+        accent: '217.2 32.6% 17.5%',
+        'accent-foreground': '210 40% 98%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '210 40% 98%',
+        border: '217.2 32.6% 17.5%',
+        input: '217.2 32.6% 17.5%',
+        ring: '224.3 76.3% 48%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
   {
-    name: "yellow",
-    label: "Yellow",
+    name: 'yellow',
+    label: 'Yellow',
     activeColor: {
-      light: "47.9 95.8% 53.1%",
-      dark: "47.9 95.8% 53.1%",
+      light: '47.9 95.8% 53.1%',
+      dark: '47.9 95.8% 53.1%',
     },
     cssVars: {
       light: {
-        background: "0 0% 100%",
-        foreground: "20 14.3% 4.1%",
-        card: "0 0% 100%",
-        "card-foreground": "20 14.3% 4.1%",
-        popover: "0 0% 100%",
-        "popover-foreground": "20 14.3% 4.1%",
-        primary: "47.9 95.8% 53.1%",
-        "primary-foreground": "26 83.3% 14.1%",
-        secondary: "60 4.8% 95.9%",
-        "secondary-foreground": "24 9.8% 10%",
-        muted: "60 4.8% 95.9%",
-        "muted-foreground": "25 5.3% 44.7%",
-        accent: "60 4.8% 95.9%",
-        "accent-foreground": "24 9.8% 10%",
-        destructive: "0 84.2% 60.2%",
-        "destructive-foreground": "60 9.1% 97.8%",
-        border: "20 5.9% 90%",
-        input: "20 5.9% 90%",
-        ring: "20 14.3% 4.1%",
-        radius: "0.95rem",
-        "chart-1": "12 76% 61%",
-        "chart-2": "173 58% 39%",
-        "chart-3": "197 37% 24%",
-        "chart-4": "43 74% 66%",
-        "chart-5": "27 87% 67%",
+        background: '0 0% 100%',
+        foreground: '20 14.3% 4.1%',
+        card: '0 0% 100%',
+        'card-foreground': '20 14.3% 4.1%',
+        popover: '0 0% 100%',
+        'popover-foreground': '20 14.3% 4.1%',
+        primary: '47.9 95.8% 53.1%',
+        'primary-foreground': '26 83.3% 14.1%',
+        secondary: '60 4.8% 95.9%',
+        'secondary-foreground': '24 9.8% 10%',
+        muted: '60 4.8% 95.9%',
+        'muted-foreground': '25 5.3% 44.7%',
+        accent: '60 4.8% 95.9%',
+        'accent-foreground': '24 9.8% 10%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '60 9.1% 97.8%',
+        border: '20 5.9% 90%',
+        input: '20 5.9% 90%',
+        ring: '20 14.3% 4.1%',
+        radius: '0.95rem',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
-        background: "20 14.3% 4.1%",
-        foreground: "60 9.1% 97.8%",
-        card: "20 14.3% 4.1%",
-        "card-foreground": "60 9.1% 97.8%",
-        popover: "20 14.3% 4.1%",
-        "popover-foreground": "60 9.1% 97.8%",
-        primary: "47.9 95.8% 53.1%",
-        "primary-foreground": "26 83.3% 14.1%",
-        secondary: "12 6.5% 15.1%",
-        "secondary-foreground": "60 9.1% 97.8%",
-        muted: "12 6.5% 15.1%",
-        "muted-foreground": "24 5.4% 63.9%",
-        accent: "12 6.5% 15.1%",
-        "accent-foreground": "60 9.1% 97.8%",
-        destructive: "0 62.8% 30.6%",
-        "destructive-foreground": "60 9.1% 97.8%",
-        border: "12 6.5% 15.1%",
-        input: "12 6.5% 15.1%",
-        ring: "35.5 91.7% 32.9%",
-        "chart-1": "220 70% 50%",
-        "chart-2": "160 60% 45%",
-        "chart-3": "30 80% 55%",
-        "chart-4": "280 65% 60%",
-        "chart-5": "340 75% 55%",
+        background: '20 14.3% 4.1%',
+        foreground: '60 9.1% 97.8%',
+        card: '20 14.3% 4.1%',
+        'card-foreground': '60 9.1% 97.8%',
+        popover: '20 14.3% 4.1%',
+        'popover-foreground': '60 9.1% 97.8%',
+        primary: '47.9 95.8% 53.1%',
+        'primary-foreground': '26 83.3% 14.1%',
+        secondary: '12 6.5% 15.1%',
+        'secondary-foreground': '60 9.1% 97.8%',
+        muted: '12 6.5% 15.1%',
+        'muted-foreground': '24 5.4% 63.9%',
+        accent: '12 6.5% 15.1%',
+        'accent-foreground': '60 9.1% 97.8%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '60 9.1% 97.8%',
+        border: '12 6.5% 15.1%',
+        input: '12 6.5% 15.1%',
+        ring: '35.5 91.7% 32.9%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
   {
-    name: "violet",
-    label: "Violet",
+    name: 'violet',
+    label: 'Violet',
     activeColor: {
-      light: "262.1 83.3% 57.8%",
-      dark: "263.4 70% 50.4%",
+      light: '262.1 83.3% 57.8%',
+      dark: '263.4 70% 50.4%',
     },
     cssVars: {
       light: {
-        background: "0 0% 100%",
-        foreground: "224 71.4% 4.1%",
-        card: "0 0% 100%",
-        "card-foreground": "224 71.4% 4.1%",
-        popover: "0 0% 100%",
-        "popover-foreground": "224 71.4% 4.1%",
-        primary: "262.1 83.3% 57.8%",
-        "primary-foreground": "210 20% 98%",
-        secondary: "220 14.3% 95.9%",
-        "secondary-foreground": "220.9 39.3% 11%",
-        muted: "220 14.3% 95.9%",
-        "muted-foreground": "220 8.9% 46.1%",
-        accent: "220 14.3% 95.9%",
-        "accent-foreground": "220.9 39.3% 11%",
-        destructive: "0 84.2% 60.2%",
-        "destructive-foreground": "210 20% 98%",
-        border: "220 13% 91%",
-        input: "220 13% 91%",
-        ring: "262.1 83.3% 57.8%",
-        "chart-1": "12 76% 61%",
-        "chart-2": "173 58% 39%",
-        "chart-3": "197 37% 24%",
-        "chart-4": "43 74% 66%",
-        "chart-5": "27 87% 67%",
+        background: '0 0% 100%',
+        foreground: '224 71.4% 4.1%',
+        card: '0 0% 100%',
+        'card-foreground': '224 71.4% 4.1%',
+        popover: '0 0% 100%',
+        'popover-foreground': '224 71.4% 4.1%',
+        primary: '262.1 83.3% 57.8%',
+        'primary-foreground': '210 20% 98%',
+        secondary: '220 14.3% 95.9%',
+        'secondary-foreground': '220.9 39.3% 11%',
+        muted: '220 14.3% 95.9%',
+        'muted-foreground': '220 8.9% 46.1%',
+        accent: '220 14.3% 95.9%',
+        'accent-foreground': '220.9 39.3% 11%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '210 20% 98%',
+        border: '220 13% 91%',
+        input: '220 13% 91%',
+        ring: '262.1 83.3% 57.8%',
+        'chart-1': '12 76% 61%',
+        'chart-2': '173 58% 39%',
+        'chart-3': '197 37% 24%',
+        'chart-4': '43 74% 66%',
+        'chart-5': '27 87% 67%',
       },
       dark: {
-        background: "224 71.4% 4.1%",
-        foreground: "210 20% 98%",
-        card: "224 71.4% 4.1%",
-        "card-foreground": "210 20% 98%",
-        popover: "224 71.4% 4.1%",
-        "popover-foreground": "210 20% 98%",
-        primary: "263.4 70% 50.4%",
-        "primary-foreground": "210 20% 98%",
-        secondary: "215 27.9% 16.9%",
-        "secondary-foreground": "210 20% 98%",
-        muted: "215 27.9% 16.9%",
-        "muted-foreground": "217.9 10.6% 64.9%",
-        accent: "215 27.9% 16.9%",
-        "accent-foreground": "210 20% 98%",
-        destructive: "0 62.8% 30.6%",
-        "destructive-foreground": "210 20% 98%",
-        border: "215 27.9% 16.9%",
-        input: "215 27.9% 16.9%",
-        ring: "263.4 70% 50.4%",
-        "chart-1": "220 70% 50%",
-        "chart-2": "160 60% 45%",
-        "chart-3": "30 80% 55%",
-        "chart-4": "280 65% 60%",
-        "chart-5": "340 75% 55%",
+        background: '224 71.4% 4.1%',
+        foreground: '210 20% 98%',
+        card: '224 71.4% 4.1%',
+        'card-foreground': '210 20% 98%',
+        popover: '224 71.4% 4.1%',
+        'popover-foreground': '210 20% 98%',
+        primary: '263.4 70% 50.4%',
+        'primary-foreground': '210 20% 98%',
+        secondary: '215 27.9% 16.9%',
+        'secondary-foreground': '210 20% 98%',
+        muted: '215 27.9% 16.9%',
+        'muted-foreground': '217.9 10.6% 64.9%',
+        accent: '215 27.9% 16.9%',
+        'accent-foreground': '210 20% 98%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '210 20% 98%',
+        border: '215 27.9% 16.9%',
+        input: '215 27.9% 16.9%',
+        ring: '263.4 70% 50.4%',
+        'chart-1': '220 70% 50%',
+        'chart-2': '160 60% 45%',
+        'chart-3': '30 80% 55%',
+        'chart-4': '280 65% 60%',
+        'chart-5': '340 75% 55%',
       },
     },
   },
diff --git a/docs/www/registry/ui.ts b/docs/www/registry/ui.ts
index 62d6036..c86ce8c 100644
--- a/docs/www/registry/ui.ts
+++ b/docs/www/registry/ui.ts
@@ -5,6 +5,6 @@ export const ui: Registry = [
     name: 'DuckButton',
     type: 'components:ui',
     dependencies: ['@radix-ui/react-slot'],
-    files: ['ui/DuckButton'],
+    files: ['ui/DuckButton.tsx'],
   },
 ]