diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx
index 289250d25ed..2bb3500c08b 100644
--- a/apps/www/__registry__/index.tsx
+++ b/apps/www/__registry__/index.tsx
@@ -17,7 +17,7 @@ export const Index: Record<string, any> = {
       type: "components:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/alert")),
-      files: ["registry/default/ui/alert.tsx"],
+      files: ["registry/default/ui/alert.tsx","registry/stories/alert.stories.tsx"],
     },
     "alert-dialog": {
       name: "alert-dialog",
@@ -45,7 +45,7 @@ export const Index: Record<string, any> = {
       type: "components:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/badge")),
-      files: ["registry/default/ui/badge.tsx"],
+      files: ["registry/default/ui/badge.tsx","registry/stories/badge.stories.tsx"],
     },
     "button": {
       name: "button",
@@ -59,14 +59,14 @@ export const Index: Record<string, any> = {
       type: "components:ui",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/default/ui/calendar")),
-      files: ["registry/default/ui/calendar.tsx"],
+      files: ["registry/default/ui/calendar.tsx","registry/stories/calendar.stories.tsx"],
     },
     "card": {
       name: "card",
       type: "components:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/card")),
-      files: ["registry/default/ui/card.tsx"],
+      files: ["registry/default/ui/card.tsx","registry/stories/card.stories.tsx"],
     },
     "checkbox": {
       name: "checkbox",
@@ -87,7 +87,7 @@ export const Index: Record<string, any> = {
       type: "components:ui",
       registryDependencies: ["dialog"],
       component: React.lazy(() => import("@/registry/default/ui/command")),
-      files: ["registry/default/ui/command.tsx"],
+      files: ["registry/default/ui/command.tsx","registry/stories/command.stories.tsx"],
     },
     "context-menu": {
       name: "context-menu",
@@ -115,7 +115,7 @@ export const Index: Record<string, any> = {
       type: "components:ui",
       registryDependencies: ["button","label"],
       component: React.lazy(() => import("@/registry/default/ui/form")),
-      files: ["registry/default/ui/form.tsx"],
+      files: ["registry/default/ui/form.tsx","registry/stories/form.stories.tsx"],
     },
     "hover-card": {
       name: "hover-card",
@@ -150,7 +150,7 @@ export const Index: Record<string, any> = {
       type: "components:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/navigation-menu")),
-      files: ["registry/default/ui/navigation-menu.tsx"],
+      files: ["registry/default/ui/navigation-menu.tsx","registry/stories/navigation-menu.stories.tsx"],
     },
     "popover": {
       name: "popover",
@@ -199,14 +199,14 @@ export const Index: Record<string, any> = {
       type: "components:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/sheet")),
-      files: ["registry/default/ui/sheet.tsx"],
+      files: ["registry/default/ui/sheet.tsx","registry/stories/sheet.stories.tsx"],
     },
     "skeleton": {
       name: "skeleton",
       type: "components:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/skeleton")),
-      files: ["registry/default/ui/skeleton.tsx"],
+      files: ["registry/default/ui/skeleton.tsx","registry/stories/skeleton.stories.tsx"],
     },
     "slider": {
       name: "slider",
@@ -227,7 +227,7 @@ export const Index: Record<string, any> = {
       type: "components:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/table")),
-      files: ["registry/default/ui/table.tsx"],
+      files: ["registry/default/ui/table.tsx","registry/stories/table.stories.tsx"],
     },
     "tabs": {
       name: "tabs",
@@ -255,7 +255,7 @@ export const Index: Record<string, any> = {
       type: "components:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/toggle")),
-      files: ["registry/default/ui/toggle.tsx"],
+      files: ["registry/default/ui/toggle.tsx","registry/stories/toggle.stories.tsx"],
     },
     "tooltip": {
       name: "tooltip",
@@ -1026,7 +1026,7 @@ export const Index: Record<string, any> = {
       type: "components:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/alert")),
-      files: ["registry/new-york/ui/alert.tsx"],
+      files: ["registry/new-york/ui/alert.tsx","registry/stories/alert.stories.tsx"],
     },
     "alert-dialog": {
       name: "alert-dialog",
@@ -1054,7 +1054,7 @@ export const Index: Record<string, any> = {
       type: "components:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/badge")),
-      files: ["registry/new-york/ui/badge.tsx"],
+      files: ["registry/new-york/ui/badge.tsx","registry/stories/badge.stories.tsx"],
     },
     "button": {
       name: "button",
@@ -1068,14 +1068,14 @@ export const Index: Record<string, any> = {
       type: "components:ui",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/new-york/ui/calendar")),
-      files: ["registry/new-york/ui/calendar.tsx"],
+      files: ["registry/new-york/ui/calendar.tsx","registry/stories/calendar.stories.tsx"],
     },
     "card": {
       name: "card",
       type: "components:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/card")),
-      files: ["registry/new-york/ui/card.tsx"],
+      files: ["registry/new-york/ui/card.tsx","registry/stories/card.stories.tsx"],
     },
     "checkbox": {
       name: "checkbox",
@@ -1096,7 +1096,7 @@ export const Index: Record<string, any> = {
       type: "components:ui",
       registryDependencies: ["dialog"],
       component: React.lazy(() => import("@/registry/new-york/ui/command")),
-      files: ["registry/new-york/ui/command.tsx"],
+      files: ["registry/new-york/ui/command.tsx","registry/stories/command.stories.tsx"],
     },
     "context-menu": {
       name: "context-menu",
@@ -1124,7 +1124,7 @@ export const Index: Record<string, any> = {
       type: "components:ui",
       registryDependencies: ["button","label"],
       component: React.lazy(() => import("@/registry/new-york/ui/form")),
-      files: ["registry/new-york/ui/form.tsx"],
+      files: ["registry/new-york/ui/form.tsx","registry/stories/form.stories.tsx"],
     },
     "hover-card": {
       name: "hover-card",
@@ -1159,7 +1159,7 @@ export const Index: Record<string, any> = {
       type: "components:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/navigation-menu")),
-      files: ["registry/new-york/ui/navigation-menu.tsx"],
+      files: ["registry/new-york/ui/navigation-menu.tsx","registry/stories/navigation-menu.stories.tsx"],
     },
     "popover": {
       name: "popover",
@@ -1208,14 +1208,14 @@ export const Index: Record<string, any> = {
       type: "components:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/sheet")),
-      files: ["registry/new-york/ui/sheet.tsx"],
+      files: ["registry/new-york/ui/sheet.tsx","registry/stories/sheet.stories.tsx"],
     },
     "skeleton": {
       name: "skeleton",
       type: "components:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/skeleton")),
-      files: ["registry/new-york/ui/skeleton.tsx"],
+      files: ["registry/new-york/ui/skeleton.tsx","registry/stories/skeleton.stories.tsx"],
     },
     "slider": {
       name: "slider",
@@ -1236,7 +1236,7 @@ export const Index: Record<string, any> = {
       type: "components:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/table")),
-      files: ["registry/new-york/ui/table.tsx"],
+      files: ["registry/new-york/ui/table.tsx","registry/stories/table.stories.tsx"],
     },
     "tabs": {
       name: "tabs",
@@ -1264,7 +1264,7 @@ export const Index: Record<string, any> = {
       type: "components:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/toggle")),
-      files: ["registry/new-york/ui/toggle.tsx"],
+      files: ["registry/new-york/ui/toggle.tsx","registry/stories/toggle.stories.tsx"],
     },
     "tooltip": {
       name: "tooltip",
diff --git a/apps/www/public/registry/colors/index.json b/apps/www/public/registry/colors/index.json
index 6b70773e73f..c25158efb11 100644
--- a/apps/www/public/registry/colors/index.json
+++ b/apps/www/public/registry/colors/index.json
@@ -1996,4 +1996,4 @@
       "hslChannel": "343.1 87.7% 15.9%"
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/www/public/registry/colors/slate.json b/apps/www/public/registry/colors/slate.json
index 5db830be4bf..6d80bc78579 100644
--- a/apps/www/public/registry/colors/slate.json
+++ b/apps/www/public/registry/colors/slate.json
@@ -89,4 +89,4 @@
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n \n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n \n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n \n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n \n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n \n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n \n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n \n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n \n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n \n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n \n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n \n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n    --ring: 212.7 26.8% 83.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
+}
\ No newline at end of file
diff --git a/apps/www/public/registry/index.json b/apps/www/public/registry/index.json
index 406292b83b4..513a6bbc6cf 100644
--- a/apps/www/public/registry/index.json
+++ b/apps/www/public/registry/index.json
@@ -13,7 +13,8 @@
   {
     "name": "alert",
     "files": [
-      "ui/alert.tsx"
+      "ui/alert.tsx",
+      "stories/alert.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -56,7 +57,8 @@
   {
     "name": "badge",
     "files": [
-      "ui/badge.tsx"
+      "ui/badge.tsx",
+      "stories/badge.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -81,14 +83,16 @@
       "button"
     ],
     "files": [
-      "ui/calendar.tsx"
+      "ui/calendar.tsx",
+      "stories/calendar.stories.tsx"
     ],
     "type": "components:ui"
   },
   {
     "name": "card",
     "files": [
-      "ui/card.tsx"
+      "ui/card.tsx",
+      "stories/card.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -123,7 +127,8 @@
       "dialog"
     ],
     "files": [
-      "ui/command.tsx"
+      "ui/command.tsx",
+      "stories/command.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -174,7 +179,8 @@
       "label"
     ],
     "files": [
-      "ui/form.tsx"
+      "ui/form.tsx",
+      "stories/form.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -225,7 +231,8 @@
       "@radix-ui/react-navigation-menu"
     ],
     "files": [
-      "ui/navigation-menu.tsx"
+      "ui/navigation-menu.tsx",
+      "stories/navigation-menu.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -301,14 +308,16 @@
       "@radix-ui/react-dialog"
     ],
     "files": [
-      "ui/sheet.tsx"
+      "ui/sheet.tsx",
+      "stories/sheet.stories.tsx"
     ],
     "type": "components:ui"
   },
   {
     "name": "skeleton",
     "files": [
-      "ui/skeleton.tsx"
+      "ui/skeleton.tsx",
+      "stories/skeleton.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -337,7 +346,8 @@
   {
     "name": "table",
     "files": [
-      "ui/table.tsx"
+      "ui/table.tsx",
+      "stories/table.stories.tsx"
     ],
     "type": "components:ui"
   },
@@ -378,7 +388,8 @@
       "@radix-ui/react-toggle"
     ],
     "files": [
-      "ui/toggle.tsx"
+      "ui/toggle.tsx",
+      "stories/toggle.stories.tsx"
     ],
     "type": "components:ui"
   },
diff --git a/apps/www/public/registry/styles/default/accordion.json b/apps/www/public/registry/styles/default/accordion.json
index 027b1682321..ab7e2f30baa 100644
--- a/apps/www/public/registry/styles/default/accordion.json
+++ b/apps/www/public/registry/styles/default/accordion.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "accordion.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"../default/ui/accordion\"\n\nconst meta: Meta<typeof Accordion> = {\n  title: \"ui/Accordion\",\n  component: Accordion,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Accordion>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Accordion {...args}>\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It adheres to the WAI-ARIA design pattern.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it styled?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It comes with default styles that matches the other components'\n          aesthetic.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Is it animated?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It's animated by default, but you can disable it if you prefer.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  ),\n  args: {\n    type: \"single\",\n    collapsible: true,\n  },\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\"\n\nconst meta: Meta<typeof Accordion> = {\n  title: \"ui/Accordion\",\n  component: Accordion,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Accordion>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Accordion {...args}>\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It adheres to the WAI-ARIA design pattern.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it styled?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It comes with default styles that matches the other components'\n          aesthetic.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Is it animated?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It's animated by default, but you can disable it if you prefer.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  ),\n  args: {\n    type: \"single\",\n    collapsible: true,\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/alert-dialog.json b/apps/www/public/registry/styles/default/alert-dialog.json
index 88462828bfa..83bb79e50d1 100644
--- a/apps/www/public/registry/styles/default/alert-dialog.json
+++ b/apps/www/public/registry/styles/default/alert-dialog.json
@@ -13,7 +13,7 @@
     },
     {
       "name": "alert-dialog.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"../default/ui/alert-dialog\"\nimport { Button } from \"../default/ui/button\"\n\nconst meta: Meta<typeof AlertDialog> = {\n  title: \"ui/AlertDialog\",\n  component: AlertDialog,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof AlertDialog>\n\nexport const Base: Story = {\n  render: () => (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you sure absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nconst meta: Meta<typeof AlertDialog> = {\n  title: \"ui/AlertDialog\",\n  component: AlertDialog,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof AlertDialog>\n\nexport const Base: Story = {\n  render: (args) => (\n    <AlertDialog {...args}>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you sure absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/alert.json b/apps/www/public/registry/styles/default/alert.json
index e1bc8d0fa79..d3bc82ffe02 100644
--- a/apps/www/public/registry/styles/default/alert.json
+++ b/apps/www/public/registry/styles/default/alert.json
@@ -4,6 +4,10 @@
     {
       "name": "alert.tsx",
       "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n  \"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\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-background text-foreground\",\n        destructive:\n          \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst Alert = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"alert\"\n    className={cn(alertVariants({ variant }), className)}\n    {...props}\n  />\n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    className={cn(\"mb-1 font-medium leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm [&_p]:leading-relaxed\", className)}\n    {...props}\n  />\n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n"
+    },
+    {
+      "name": "alert.stories.tsx",
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { AlertCircle, Terminal } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nconst meta: Meta<typeof Alert> = {\n  title: \"ui/Alert\",\n  component: Alert,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Alert>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Alert {...args}>\n      <Terminal className=\"h-4 w-4\" />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        You can add components to your app using the cli.\n      </AlertDescription>\n    </Alert>\n  ),\n  args: {\n    variant: \"default\",\n  },\n}\n\nexport const Destructive: Story = {\n  render: (args) => (\n    <Alert {...args}>\n      <AlertCircle className=\"h-4 w-4\" />\n      <AlertTitle>Error</AlertTitle>\n      <AlertDescription>\n        Your session has expired. Please log in again.\n      </AlertDescription>\n    </Alert>\n  ),\n  args: {\n    variant: \"destructive\",\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/aspect-ratio.json b/apps/www/public/registry/styles/default/aspect-ratio.json
index e6e4cdc3289..858afdecff0 100644
--- a/apps/www/public/registry/styles/default/aspect-ratio.json
+++ b/apps/www/public/registry/styles/default/aspect-ratio.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "aspect-ratio.stories.tsx",
-      "content": "import Image from \"next/image\"\nimport { Meta, StoryObj } from \"@storybook/react\"\n\nimport { AspectRatio } from \"@/registry/default/ui/aspect-ratio\"\n\nconst meta: Meta<typeof AspectRatio> = {\n  title: \"ui/AspectRatio\",\n  component: AspectRatio,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof AspectRatio>\n\nexport const Base: Story = {\n  render: () => (\n    <AspectRatio ratio={16 / 9} className=\"bg-slate-50 dark:bg-slate-800\">\n      <Image\n        src=\"https://images.unsplash.com/photo-1576075796033-848c2a5f3696?w=800&dpr=2&q=80\"\n        alt=\"Photo by Alvaro Pinot\"\n        fill\n        className=\"rounded-md object-cover\"\n      />\n    </AspectRatio>\n  ),\n  args: {},\n}\n"
+      "content": "import Image from \"next/image\"\nimport { Meta, StoryObj } from \"@storybook/react\"\n\nimport { AspectRatio } from \"@/registry/default/ui/aspect-ratio\"\n\nconst meta: Meta<typeof AspectRatio> = {\n  title: \"ui/AspectRatio\",\n  component: AspectRatio,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof AspectRatio>\n\nexport const Base: Story = {\n  render: (args) => (\n    <AspectRatio {...args} className=\"bg-slate-50 dark:bg-slate-800\">\n      <Image\n        src=\"https://images.unsplash.com/photo-1576075796033-848c2a5f3696?w=800&dpr=2&q=80\"\n        alt=\"Photo by Alvaro Pinot\"\n        fill\n        className=\"rounded-md object-cover\"\n      />\n    </AspectRatio>\n  ),\n  args: {\n    ratio: 16 / 9,\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/avatar.json b/apps/www/public/registry/styles/default/avatar.json
index 7dfc8768e48..ad595066c23 100644
--- a/apps/www/public/registry/styles/default/avatar.json
+++ b/apps/www/public/registry/styles/default/avatar.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "avatar.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"../default/ui/avatar\"\n\nconst meta: Meta<typeof Avatar> = {\n  title: \"ui/Avatar\",\n  component: Avatar,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Avatar>\n\nexport const Base: Story = {\n  render: () => (\n    <Avatar>\n      <AvatarImage src=\"https://github.com/shadcn.png\" />\n      <AvatarFallback>CN</AvatarFallback>\n    </Avatar>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nconst meta: Meta<typeof Avatar> = {\n  title: \"ui/Avatar\",\n  component: Avatar,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Avatar>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Avatar {...args}>\n      <AvatarImage src=\"https://github.com/shadcn.png\" />\n      <AvatarFallback>CN</AvatarFallback>\n    </Avatar>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/badge.json b/apps/www/public/registry/styles/default/badge.json
index ef710481409..37b70e59fa4 100644
--- a/apps/www/public/registry/styles/default/badge.json
+++ b/apps/www/public/registry/styles/default/badge.json
@@ -4,6 +4,10 @@
     {
       "name": "badge.tsx",
       "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"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\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-primary text-primary-foreground hover:bg-primary/80\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        destructive:\n          \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\n        outline: \"text-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n  return (\n    <div className={cn(badgeVariants({ variant }), className)} {...props} />\n  )\n}\n\nexport { Badge, badgeVariants }\n"
+    },
+    {
+      "name": "badge.stories.tsx",
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\n\nconst meta: Meta<typeof Badge> = {\n  title: \"ui/Badge\",\n  component: Badge,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Badge>\n\nexport const Base: Story = {\n  render: (args) => <Badge {...args}>Badge</Badge>,\n  args: {},\n}\n\nexport const Secondary: Story = {\n  render: (args) => <Badge {...args}>Badge</Badge>,\n  args: {\n    variant: \"secondary\",\n  },\n}\n\nexport const Destructive: Story = {\n  render: (args) => <Badge {...args}>Badge</Badge>,\n  args: {\n    variant: \"destructive\",\n  },\n}\n\nexport const Outline: Story = {\n  render: (args) => <Badge {...args}>Badge</Badge>,\n  args: {\n    variant: \"outline\",\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/button.json b/apps/www/public/registry/styles/default/button.json
index 3246f325db7..c3eb49d5a12 100644
--- a/apps/www/public/registry/styles/default/button.json
+++ b/apps/www/public/registry/styles/default/button.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "button.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { Loader2, Mail } from \"lucide-react\"\n\nimport { Button } from \"../default/ui/button\"\n\nconst meta: Meta<typeof Button> = {\n  title: \"ui/Button\",\n  component: Button,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Button>\n\nexport const Base: Story = {\n  render: (args) => <Button {...args}>Button</Button>,\n  args: {},\n}\nexport const Outline: Story = {\n  render: (args) => <Button {...args}>Button</Button>,\n  args: {\n    variant: \"outline\",\n  },\n}\nexport const Ghost: Story = {\n  render: (args) => <Button {...args}>Button</Button>,\n  args: {\n    variant: \"ghost\",\n  },\n}\nexport const Secondary: Story = {\n  render: (args) => <Button {...args}>Button</Button>,\n  args: {\n    variant: \"secondary\",\n  },\n}\nexport const Link: Story = {\n  render: (args) => <Button {...args}>Button</Button>,\n  args: {\n    variant: \"link\",\n  },\n}\nexport const Loading: Story = {\n  render: (args) => (\n    <Button {...args}>\n      <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />\n      Button\n    </Button>\n  ),\n  args: {\n    variant: \"outline\",\n  },\n}\nexport const WithIcon: Story = {\n  render: (args) => (\n    <Button {...args}>\n      <Mail className=\"mr-2 h-4 w-4\" /> Login with Email Button\n    </Button>\n  ),\n  args: {\n    variant: \"secondary\",\n  },\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { Loader2, Mail } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nconst meta: Meta<typeof Button> = {\n  title: \"ui/Button\",\n  component: Button,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Button>\n\nexport const Base: Story = {\n  render: (args) => <Button {...args}>Button</Button>,\n  args: {},\n}\n\nexport const Outline: Story = {\n  render: (args) => <Button {...args}>Button</Button>,\n  args: {\n    variant: \"outline\",\n  },\n}\n\nexport const Ghost: Story = {\n  render: (args) => <Button {...args}>Button</Button>,\n  args: {\n    variant: \"ghost\",\n  },\n}\n\nexport const Secondary: Story = {\n  render: (args) => <Button {...args}>Button</Button>,\n  args: {\n    variant: \"secondary\",\n  },\n}\n\nexport const Destructive: Story = {\n  render: (args) => <Button {...args}>Button</Button>,\n  args: {\n    variant: \"destructive\",\n  },\n}\n\nexport const Link: Story = {\n  render: (args) => <Button {...args}>Button</Button>,\n  args: {\n    variant: \"link\",\n  },\n}\n\nexport const Loading: Story = {\n  render: (args) => (\n    <Button {...args}>\n      <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />\n      Button\n    </Button>\n  ),\n  args: {\n    variant: \"outline\",\n  },\n}\n\nexport const WithIcon: Story = {\n  render: (args) => (\n    <Button {...args}>\n      <Mail className=\"mr-2 h-4 w-4\" /> Login with Email Button\n    </Button>\n  ),\n  args: {\n    variant: \"secondary\",\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/calendar.json b/apps/www/public/registry/styles/default/calendar.json
index aac65b09232..e701c53493e 100644
--- a/apps/www/public/registry/styles/default/calendar.json
+++ b/apps/www/public/registry/styles/default/calendar.json
@@ -11,6 +11,10 @@
     {
       "name": "calendar.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: \"text-center text-sm p-0 relative [&: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\",\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside: \"text-muted-foreground opacity-50\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeft className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRight className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"
+    },
+    {
+      "name": "calendar.stories.tsx",
+      "content": "import { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Meta, StoryObj } from \"@storybook/react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport * as z from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\nimport { Toaster } from \"@/registry/default/ui/toaster\"\nimport { useToast } from \"@/registry/default/ui/use-toast\"\n\nconst meta: Meta<typeof Calendar> = {\n  title: \"ui/Calendar\",\n  component: Calendar,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Calendar>\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport const Base: Story = {\n  args: {\n    mode: \"single\",\n    className: \"rounded-md border w-fit\",\n  },\n}\n\nexport const CalendarForm: Story = {\n  args: {\n    mode: \"single\",\n  },\n  render: (args) => <ExampleCalendarForm {...args} />,\n}\n\nconst ExampleCalendarForm = (args: Story[\"args\"]) => {\n  const { toast } = useToast()\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <>\n      <Form {...form}>\n        <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n          <FormField\n            control={form.control}\n            name=\"dob\"\n            render={({ field }) => (\n              <FormItem className=\"flex flex-col\">\n                <FormLabel>Date of birth</FormLabel>\n                <Popover>\n                  <PopoverTrigger asChild>\n                    <FormControl>\n                      <Button\n                        variant={\"outline\"}\n                        className={cn(\n                          \"w-[240px] pl-3 text-left font-normal\",\n                          !field.value && \"text-muted-foreground\"\n                        )}\n                      >\n                        {field.value ? (\n                          format(field.value, \"PPP\")\n                        ) : (\n                          <span>Pick a date</span>\n                        )}\n                        <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                      </Button>\n                    </FormControl>\n                  </PopoverTrigger>\n                  <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                    <Calendar\n                      {...args}\n                      mode=\"single\"\n                      selected={field.value}\n                      onSelect={field.onChange}\n                      disabled={(date) =>\n                        date > new Date() || date < new Date(\"1900-01-01\")\n                      }\n                      initialFocus\n                    />\n                  </PopoverContent>\n                </Popover>\n                <FormDescription>\n                  Your date of birth is used to calculate your age.\n                </FormDescription>\n                <FormMessage />\n              </FormItem>\n            )}\n          />\n          <Button type=\"submit\">Submit</Button>\n        </form>\n      </Form>\n      <Toaster />\n    </>\n  )\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/card.json b/apps/www/public/registry/styles/default/card.json
index ef31d3a699f..60d9e3fa13e 100644
--- a/apps/www/public/registry/styles/default/card.json
+++ b/apps/www/public/registry/styles/default/card.json
@@ -4,6 +4,10 @@
     {
       "name": "card.tsx",
       "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-lg border bg-card text-card-foreground shadow-sm\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\n      \"text-2xl font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n"
+    },
+    {
+      "name": "card.stories.tsx",
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { BellRing, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nconst meta: Meta<typeof Card> = {\n  title: \"ui/Card\",\n  component: Card,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Card>\n\nconst notifications = [\n  {\n    title: \"Your call has been confirmed.\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"You have a new message!\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"Your subscription is expiring soon!\",\n    description: \"2 hours ago\",\n  },\n]\n\nexport const Base: Story = {\n  render: (args) => (\n    <Card {...args} className={cn(\"w-[380px]\")}>\n      <CardHeader>\n        <CardTitle>Notifications</CardTitle>\n        <CardDescription>You have 3 unread messages.</CardDescription>\n      </CardHeader>\n      <CardContent className=\"grid gap-4\">\n        <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n          <BellRing />\n          <div className=\"flex-1 space-y-1\">\n            <p className=\"text-sm font-normal leading-none\">\n              Push Notifications\n            </p>\n            <p className=\"text-sm text-muted-foreground\">\n              Send notifications to device.\n            </p>\n          </div>\n          <Switch />\n        </div>\n        <div>\n          {notifications.map((notification, index) => (\n            <div\n              key={index}\n              className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n            >\n              <span className=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n              <div className=\"space-y-1\">\n                <p className=\"text-sm font-normal leading-none\">\n                  {notification.title}\n                </p>\n                <p className=\"text-sm text-muted-foreground\">\n                  {notification.description}\n                </p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button className=\"w-full\">\n          <Check className=\"mr-2 h-4 w-4\" /> Mark all as read\n        </Button>\n      </CardFooter>\n    </Card>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/checkbox.json b/apps/www/public/registry/styles/default/checkbox.json
index 583a3939bf4..c3b5a02b42e 100644
--- a/apps/www/public/registry/styles/default/checkbox.json
+++ b/apps/www/public/registry/styles/default/checkbox.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "checkbox.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Checkbox } from \"../default/ui/checkbox\"\n\nconst meta: Meta<typeof Checkbox> = {\n  title: \"ui/Checkbox\",\n  component: Checkbox,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Checkbox>\n\nexport const Base: Story = {\n  render: (args) => (\n    <div className=\"items-top flex space-x-2\">\n      <Checkbox {...args} id=\"terms1\" />\n      <div className=\"grid gap-1.5 leading-none\">\n        <label\n          htmlFor=\"terms1\"\n          className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n        >\n          Accept terms and conditions\n        </label>\n        <p className=\"text-sm text-slate-500 dark:text-slate-400\">\n          You agree to our Terms of Service and Privacy Policy.\n        </p>\n      </div>\n    </div>\n  ),\n  args: {},\n}\nexport const Disabled: Story = {\n  render: (args) => (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox {...args} id=\"terms2\" />\n      <label\n        htmlFor=\"terms2\"\n        className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n    </div>\n  ),\n  args: {\n    disabled: true,\n  },\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\n\nconst meta: Meta<typeof Checkbox> = {\n  title: \"ui/Checkbox\",\n  component: Checkbox,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Checkbox>\n\nexport const Base: Story = {\n  render: (args) => (\n    <div className=\"items-top flex space-x-2\">\n      <Checkbox {...args} id=\"terms1\" />\n      <div className=\"grid gap-1.5 leading-none\">\n        <label\n          htmlFor=\"terms1\"\n          className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n        >\n          Accept terms and conditions\n        </label>\n        <p className=\"text-sm text-slate-500 dark:text-slate-400\">\n          You agree to our Terms of Service and Privacy Policy.\n        </p>\n      </div>\n    </div>\n  ),\n  args: {},\n}\nexport const Disabled: Story = {\n  render: (args) => (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox {...args} id=\"terms2\" />\n      <label\n        htmlFor=\"terms2\"\n        className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n    </div>\n  ),\n  args: {\n    disabled: true,\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/collapsible.json b/apps/www/public/registry/styles/default/collapsible.json
index 4c65494b483..98ab046b1da 100644
--- a/apps/www/public/registry/styles/default/collapsible.json
+++ b/apps/www/public/registry/styles/default/collapsible.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "collapsible.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { ChevronsUpDown, Plus, X } from \"lucide-react\"\n\nimport { Button } from \"../default/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"../default/ui/collapsible\"\n\nconst meta: Meta<typeof Collapsible> = {\n  title: \"ui/Collapsible\",\n  component: Collapsible,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Collapsible>\n\nexport const Closed: Story = {\n  render: (args) => (\n    <Collapsible {...args} className=\"w-[350px] space-y-2\">\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\" className=\"w-9 p-0\">\n            <ChevronsUpDown className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  ),\n  args: {\n    open: false,\n    onOpenChange: () => null,\n  },\n}\nexport const Open: Story = {\n  render: (args) => (\n    <Collapsible {...args} className=\"w-[350px] space-y-2\">\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\" className=\"w-9 p-0\">\n            <ChevronsUpDown className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  ),\n  args: {\n    open: true,\n    onOpenChange: () => null,\n  },\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { ChevronsUpDown, Plus, X } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\n\nconst meta: Meta<typeof Collapsible> = {\n  title: \"ui/Collapsible\",\n  component: Collapsible,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Collapsible>\n\nexport const Closed: Story = {\n  render: (args) => (\n    <Collapsible {...args} className=\"w-[350px] space-y-2\">\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\" className=\"w-9 p-0\">\n            <ChevronsUpDown className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  ),\n  args: {\n    open: false,\n    onOpenChange: () => null,\n  },\n}\nexport const Open: Story = {\n  render: (args) => (\n    <Collapsible {...args} className=\"w-[350px] space-y-2\">\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\" className=\"w-9 p-0\">\n            <ChevronsUpDown className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  ),\n  args: {\n    open: true,\n    onOpenChange: () => null,\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/command.json b/apps/www/public/registry/styles/default/command.json
index 9f99ae0d013..18999bf7cc6 100644
--- a/apps/www/public/registry/styles/default/command.json
+++ b/apps/www/public/registry/styles/default/command.json
@@ -10,6 +10,10 @@
     {
       "name": "command.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DialogProps } from \"@radix-ui/react-dialog\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { Search } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Dialog, DialogContent } from \"@/registry/default/ui/dialog\"\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\ninterface CommandDialogProps extends DialogProps {}\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n    <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        \"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\",\n        className\n      )}\n      {...props}\n    />\n  </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\n    {...props}\n  />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty\n    ref={ref}\n    className=\"py-6 text-center text-sm\"\n    {...props}\n  />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      \"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\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nCommandShortcut.displayName = \"CommandShortcut\"\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n"
+    },
+    {
+      "name": "command.stories.tsx",
+      "content": "import { useEffect, useState } from \"react\"\nimport { Meta, StoryObj } from \"@storybook/react\"\nimport { CommandSeparator } from \"cmdk\"\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/registry/default/ui/command\"\n\nconst meta: Meta<typeof Command> = {\n  title: \"ui/Command\",\n  component: Command,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Command>\n\nexport const Base: Story = {\n  args: {\n    className: \"rounded-lg border shadow-md\",\n  },\n  render: (args) => (\n    <Command {...args}>\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem>\n            <Calendar className=\"mr-2 h-4 w-4\" />\n            <span>Calendar</span>\n          </CommandItem>\n          <CommandItem>\n            <Smile className=\"mr-2 h-4 w-4\" />\n            <span>Search Emoji</span>\n          </CommandItem>\n          <CommandItem>\n            <Calculator className=\"mr-2 h-4 w-4\" />\n            <span>Calculator</span>\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem>\n            <User className=\"mr-2 h-4 w-4\" />\n            <span>Profile</span>\n            <CommandShortcut>⌘P</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <CreditCard className=\"mr-2 h-4 w-4\" />\n            <span>Billing</span>\n            <CommandShortcut>⌘B</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <Settings className=\"mr-2 h-4 w-4\" />\n            <span>Settings</span>\n            <CommandShortcut>⌘S</CommandShortcut>\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  ),\n}\n\nexport const Dialog: Story = {\n  args: {\n    className: \"rounded-lg border shadow-md\",\n  },\n  render: (args) => <CommandDialogDemo {...args} />,\n}\n\nconst CommandDialogDemo = (args: Story[\"args\"]) => {\n  const [open, setOpen] = useState(false)\n\n  useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault()\n        setOpen((open) => !open)\n      }\n    }\n\n    document.addEventListener(\"keydown\", down)\n    return () => document.removeEventListener(\"keydown\", down)\n  }, [])\n\n  return (\n    <>\n      <p className=\"text-sm text-muted-foreground\">\n        Press{\" \"}\n        <kbd className=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100\">\n          <span className=\"text-xs\">⌘</span>J\n        </kbd>\n      </p>\n      <CommandDialog {...args} open={open} onOpenChange={setOpen}>\n        <CommandInput placeholder=\"Type a command or search...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup heading=\"Suggestions\">\n            <CommandItem>\n              <Calendar className=\"mr-2 h-4 w-4\" />\n              <span>Calendar</span>\n            </CommandItem>\n            <CommandItem>\n              <Smile className=\"mr-2 h-4 w-4\" />\n              <span>Search Emoji</span>\n            </CommandItem>\n            <CommandItem>\n              <Calculator className=\"mr-2 h-4 w-4\" />\n              <span>Calculator</span>\n            </CommandItem>\n          </CommandGroup>\n          <CommandSeparator />\n          <CommandGroup heading=\"Settings\">\n            <CommandItem>\n              <User className=\"mr-2 h-4 w-4\" />\n              <span>Profile</span>\n              <CommandShortcut>⌘P</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <CreditCard className=\"mr-2 h-4 w-4\" />\n              <span>Billing</span>\n              <CommandShortcut>⌘B</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <Settings className=\"mr-2 h-4 w-4\" />\n              <span>Settings</span>\n              <CommandShortcut>⌘S</CommandShortcut>\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </CommandDialog>\n    </>\n  )\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/context-menu.json b/apps/www/public/registry/styles/default/context-menu.json
index 13a195519a2..a31b5f41866 100644
--- a/apps/www/public/registry/styles/default/context-menu.json
+++ b/apps/www/public/registry/styles/default/context-menu.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "context-menu.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"../default/ui/context-menu\"\n\nconst meta: Meta<typeof ContextMenu> = {\n  title: \"ui/ContextMenu\",\n  component: ContextMenu,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof ContextMenu>\n\nexport const Base: Story = {\n  render: (args) => (\n    <ContextMenu>\n      <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-slate-200 text-sm dark:border-slate-700\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-64\">\n        <ContextMenuItem inset>\n          Back\n          <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset disabled>\n          Forward\n          <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset>\n          Reload\n          <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuSub>\n          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n          <ContextMenuSubContent className=\"w-48\">\n            <ContextMenuItem>\n              Save Page As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n            <ContextMenuItem>Name Window...</ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>Developer Tools</ContextMenuItem>\n          </ContextMenuSubContent>\n        </ContextMenuSub>\n        <ContextMenuSeparator />\n        <ContextMenuCheckboxItem checked>\n          Show Bookmarks Bar\n          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n        </ContextMenuCheckboxItem>\n        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n        <ContextMenuSeparator />\n        <ContextMenuRadioGroup value=\"pedro\">\n          <ContextMenuLabel inset>People</ContextMenuLabel>\n          <ContextMenuSeparator />\n          <ContextMenuRadioItem value=\"pedro\">\n            Pedro Duarte\n          </ContextMenuRadioItem>\n          <ContextMenuRadioItem value=\"colm\">Colm Tuite</ContextMenuRadioItem>\n        </ContextMenuRadioGroup>\n      </ContextMenuContent>\n    </ContextMenu>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/default/ui/context-menu\"\n\nconst meta: Meta<typeof ContextMenu> = {\n  title: \"ui/ContextMenu\",\n  component: ContextMenu,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof ContextMenu>\n\nexport const Base: Story = {\n  render: (args) => (\n    <ContextMenu {...args}>\n      <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-slate-200 text-sm dark:border-slate-700\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-64\">\n        <ContextMenuItem inset>\n          Back\n          <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset disabled>\n          Forward\n          <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset>\n          Reload\n          <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuSub>\n          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n          <ContextMenuSubContent className=\"w-48\">\n            <ContextMenuItem>\n              Save Page As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n            <ContextMenuItem>Name Window...</ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>Developer Tools</ContextMenuItem>\n          </ContextMenuSubContent>\n        </ContextMenuSub>\n        <ContextMenuSeparator />\n        <ContextMenuCheckboxItem checked>\n          Show Bookmarks Bar\n          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n        </ContextMenuCheckboxItem>\n        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n        <ContextMenuSeparator />\n        <ContextMenuRadioGroup value=\"pedro\">\n          <ContextMenuLabel inset>People</ContextMenuLabel>\n          <ContextMenuSeparator />\n          <ContextMenuRadioItem value=\"pedro\">\n            Pedro Duarte\n          </ContextMenuRadioItem>\n          <ContextMenuRadioItem value=\"colm\">Colm Tuite</ContextMenuRadioItem>\n        </ContextMenuRadioGroup>\n      </ContextMenuContent>\n    </ContextMenu>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/dialog.json b/apps/www/public/registry/styles/default/dialog.json
index 9cf105c09c8..6036b9957dc 100644
--- a/apps/www/public/registry/styles/default/dialog.json
+++ b/apps/www/public/registry/styles/default/dialog.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "dialog.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Button } from \"../default/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"../default/ui/dialog\"\nimport { Input } from \"../default/ui/input\"\nimport { Label } from \"../default/ui/label\"\n\nconst meta: Meta<typeof Dialog> = {\n  title: \"ui/Dialog\",\n  component: Dialog,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Dialog>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <DialogFooter>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nconst meta: Meta<typeof Dialog> = {\n  title: \"ui/Dialog\",\n  component: Dialog,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Dialog>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Dialog {...args}>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <DialogFooter>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/dropdown-menu.json b/apps/www/public/registry/styles/default/dropdown-menu.json
index 6ad1de11ea0..675b18e6f27 100644
--- a/apps/www/public/registry/styles/default/dropdown-menu.json
+++ b/apps/www/public/registry/styles/default/dropdown-menu.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "dropdown-menu.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport {\n  Cloud,\n  CreditCard,\n  Github,\n  Keyboard,\n  LifeBuoy,\n  LogOut,\n  Mail,\n  MessageSquare,\n  Plus,\n  PlusCircle,\n  Settings,\n  User,\n  UserPlus,\n  Users,\n} from \"lucide-react\"\n\nimport { Button } from \"../default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"../default/ui/dropdown-menu\"\n\nconst meta: Meta<typeof DropdownMenu> = {\n  title: \"ui/DropdownMenu\",\n  component: DropdownMenu,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof DropdownMenu>\n\nexport const Base: Story = {\n  render: (args) => (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <User className=\"mr-2 h-4 w-4\" />\n            <span>Profile</span>\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <CreditCard className=\"mr-2 h-4 w-4\" />\n            <span>Billing</span>\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Settings className=\"mr-2 h-4 w-4\" />\n            <span>Settings</span>\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Keyboard className=\"mr-2 h-4 w-4\" />\n            <span>Keyboard shortcuts</span>\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <Users className=\"mr-2 h-4 w-4\" />\n            <span>Team</span>\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <UserPlus className=\"mr-2 h-4 w-4\" />\n              <span>Invite users</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>\n                  <Mail className=\"mr-2 h-4 w-4\" />\n                  <span>Email</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <MessageSquare className=\"mr-2 h-4 w-4\" />\n                  <span>Message</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <PlusCircle className=\"mr-2 h-4 w-4\" />\n                  <span>More...</span>\n                </DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuItem>\n            <Plus className=\"mr-2 h-4 w-4\" />\n            <span>New Team</span>\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <Github className=\"mr-2 h-4 w-4\" />\n          <span>GitHub</span>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <LifeBuoy className=\"mr-2 h-4 w-4\" />\n          <span>Support</span>\n        </DropdownMenuItem>\n        <DropdownMenuItem disabled>\n          <Cloud className=\"mr-2 h-4 w-4\" />\n          <span>API</span>\n        </DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <LogOut className=\"mr-2 h-4 w-4\" />\n          <span>Log out</span>\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport {\n  Cloud,\n  CreditCard,\n  Github,\n  Keyboard,\n  LifeBuoy,\n  LogOut,\n  Mail,\n  MessageSquare,\n  Plus,\n  PlusCircle,\n  Settings,\n  User,\n  UserPlus,\n  Users,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nconst meta: Meta<typeof DropdownMenu> = {\n  title: \"ui/DropdownMenu\",\n  component: DropdownMenu,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof DropdownMenu>\n\nexport const Base: Story = {\n  render: (args) => (\n    <DropdownMenu {...args}>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <User className=\"mr-2 h-4 w-4\" />\n            <span>Profile</span>\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <CreditCard className=\"mr-2 h-4 w-4\" />\n            <span>Billing</span>\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Settings className=\"mr-2 h-4 w-4\" />\n            <span>Settings</span>\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Keyboard className=\"mr-2 h-4 w-4\" />\n            <span>Keyboard shortcuts</span>\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <Users className=\"mr-2 h-4 w-4\" />\n            <span>Team</span>\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <UserPlus className=\"mr-2 h-4 w-4\" />\n              <span>Invite users</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>\n                  <Mail className=\"mr-2 h-4 w-4\" />\n                  <span>Email</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <MessageSquare className=\"mr-2 h-4 w-4\" />\n                  <span>Message</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <PlusCircle className=\"mr-2 h-4 w-4\" />\n                  <span>More...</span>\n                </DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuItem>\n            <Plus className=\"mr-2 h-4 w-4\" />\n            <span>New Team</span>\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <Github className=\"mr-2 h-4 w-4\" />\n          <span>GitHub</span>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <LifeBuoy className=\"mr-2 h-4 w-4\" />\n          <span>Support</span>\n        </DropdownMenuItem>\n        <DropdownMenuItem disabled>\n          <Cloud className=\"mr-2 h-4 w-4\" />\n          <span>API</span>\n        </DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <LogOut className=\"mr-2 h-4 w-4\" />\n          <span>Log out</span>\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/form.json b/apps/www/public/registry/styles/default/form.json
index 497c49459c3..503653cb9b7 100644
--- a/apps/www/public/registry/styles/default/form.json
+++ b/apps/www/public/registry/styles/default/form.json
@@ -15,6 +15,10 @@
     {
       "name": "form.tsx",
       "content": "import * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n  Controller,\n  ControllerProps,\n  FieldPath,\n  FieldValues,\n  FormProvider,\n  useFormContext,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState, formState } = useFormContext()\n\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nconst FormItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n    </FormItemContext.Provider>\n  )\n})\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      ref={ref}\n      className={cn(error && \"text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n  React.ElementRef<typeof Slot>,\n  React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message) : children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      ref={ref}\n      id={formMessageId}\n      className={cn(\"text-sm font-medium text-destructive\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n}\n"
+    },
+    {
+      "name": "form.stories.tsx",
+      "content": "import { zodResolver } from \"@hookform/resolvers/zod\"\nimport { action } from \"@storybook/addon-actions\"\nimport { Meta, StoryObj } from \"@storybook/react\"\nimport { useForm } from \"react-hook-form\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport { Input } from \"@/registry/default/ui/input\"\n\nconst meta: Meta<typeof Form> = {\n  title: \"ui/Form\",\n  component: Form,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Form>\n\nconst formSchema = z.object({\n  username: z.string().min(2, {\n    message: \"Username must be at least 2 characters.\",\n  }),\n})\n\nconst ProfileForm = (args: Story[\"args\"]) => {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      username: \"\",\n    },\n  })\n  function onSubmit(values: z.infer<typeof formSchema>) {\n    action(\"onSubmit\")(values)\n  }\n  return (\n    <Form {...args} {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"username\" {...field} />\n              </FormControl>\n              <FormDescription>\n                This is your public display name.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n\nexport const Base: Story = {\n  render: (args) => <ProfileForm {...args} />,\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/hover-card.json b/apps/www/public/registry/styles/default/hover-card.json
index e20ddf78e26..d02b6130b88 100644
--- a/apps/www/public/registry/styles/default/hover-card.json
+++ b/apps/www/public/registry/styles/default/hover-card.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "hover-card.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { CalendarDays } from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"../default/ui/avatar\"\nimport { Button } from \"../default/ui/button\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"../default/ui/hover-card\"\n\nconst meta: Meta<typeof HoverCard> = {\n  title: \"ui/HoverCard\",\n  component: HoverCard,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof HoverCard>\n\nexport const Base: Story = {\n  render: (args) => (\n    <HoverCard>\n      <HoverCardTrigger asChild>\n        <Button variant=\"link\">@nextjs</Button>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-80\">\n        <div className=\"flex justify-between space-x-4\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/vercel.png\" />\n            <AvatarFallback>VC</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n            <p className=\"text-sm\">\n              The React Framework – created and maintained by @vercel.\n            </p>\n            <div className=\"flex items-center pt-2\">\n              <CalendarDays className=\"mr-2 h-4 w-4 opacity-70\" />{\" \"}\n              <span className=\"text-xs text-slate-500 dark:text-slate-400\">\n                Joined December 2021\n              </span>\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { CalendarDays } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/default/ui/hover-card\"\n\nconst meta: Meta<typeof HoverCard> = {\n  title: \"ui/HoverCard\",\n  component: HoverCard,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof HoverCard>\n\nexport const Base: Story = {\n  render: (args) => (\n    <HoverCard {...args}>\n      <HoverCardTrigger asChild>\n        <Button variant=\"link\">@nextjs</Button>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-80\">\n        <div className=\"flex justify-between space-x-4\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/vercel.png\" />\n            <AvatarFallback>VC</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n            <p className=\"text-sm\">\n              The React Framework – created and maintained by @vercel.\n            </p>\n            <div className=\"flex items-center pt-2\">\n              <CalendarDays className=\"mr-2 h-4 w-4 opacity-70\" />{\" \"}\n              <span className=\"text-xs text-slate-500 dark:text-slate-400\">\n                Joined December 2021\n              </span>\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/input.json b/apps/www/public/registry/styles/default/input.json
index f063811d54c..c85862e858b 100644
--- a/apps/www/public/registry/styles/default/input.json
+++ b/apps/www/public/registry/styles/default/input.json
@@ -7,7 +7,7 @@
     },
     {
       "name": "input.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Button } from \"../default/ui/button\"\nimport { Input } from \"../default/ui/input\"\nimport { Label } from \"../default/ui/label\"\n\nconst meta: Meta<typeof Input> = {\n  title: \"ui/Input\",\n  component: Input,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Input>\n\nexport const Default: Story = {\n  render: (args) => <Input {...args} />,\n  args: {\n    type: \"email\",\n    placeholder: \"Email\",\n  },\n}\nexport const Disabled: Story = {\n  render: (args) => <Input disabled {...args} />,\n  args: { ...Default.args },\n}\nexport const WithLabel: Story = {\n  render: (args) => (\n    <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n      <Label htmlFor=\"email\">{args.placeholder}</Label>\n      <Input {...args} id=\"email\" />\n    </div>\n  ),\n  args: { ...Default.args },\n}\nexport const WithText: Story = {\n  render: (args) => (\n    <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n      <Label htmlFor=\"email-2\">{args.placeholder}</Label>\n      <Input {...args} id=\"email-2\" />\n      <p className=\"text-sm text-slate-500\">Enter your email address.</p>\n    </div>\n  ),\n  args: { ...Default.args },\n}\nexport const WithButton: Story = {\n  render: (args) => (\n    <div className=\"flex w-full max-w-sm items-center space-x-2\">\n      <Input {...args} />\n      <Button type=\"submit\">Subscribe</Button>\n    </div>\n  ),\n  args: { ...Default.args },\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nconst meta: Meta<typeof Input> = {\n  title: \"ui/Input\",\n  component: Input,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Input>\n\nexport const Default: Story = {\n  render: (args) => <Input {...args} />,\n  args: {\n    type: \"email\",\n    placeholder: \"Email\",\n  },\n}\nexport const Disabled: Story = {\n  render: (args) => <Input {...args} />,\n  args: { ...Default.args, disabled: true },\n}\nexport const WithLabel: Story = {\n  render: (args) => (\n    <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n      <Label htmlFor=\"email\">{args.placeholder}</Label>\n      <Input {...args} id=\"email\" />\n    </div>\n  ),\n  args: { ...Default.args },\n}\nexport const WithText: Story = {\n  render: (args) => (\n    <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n      <Label htmlFor=\"email-2\">{args.placeholder}</Label>\n      <Input {...args} id=\"email-2\" />\n      <p className=\"text-sm text-slate-500\">Enter your email address.</p>\n    </div>\n  ),\n  args: { ...Default.args },\n}\nexport const WithButton: Story = {\n  render: (args) => (\n    <div className=\"flex w-full max-w-sm items-center space-x-2\">\n      <Input {...args} />\n      <Button type=\"submit\">Subscribe</Button>\n    </div>\n  ),\n  args: { ...Default.args },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/label.json b/apps/www/public/registry/styles/default/label.json
index a0cd431bcce..a507f81753b 100644
--- a/apps/www/public/registry/styles/default/label.json
+++ b/apps/www/public/registry/styles/default/label.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "label.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Label } from \"../default/ui/label\"\n\nconst meta: Meta<typeof Label> = {\n  title: \"ui/Label\",\n  component: Label,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Label>\n\nexport const Base: Story = {\n  render: (args) => <Label htmlFor=\"email\">Your email address</Label>,\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\n\nconst meta: Meta<typeof Label> = {\n  title: \"ui/Label\",\n  component: Label,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Label>\n\nexport const Base: Story = {\n  render: (args) => <Label {...args} htmlFor=\"email\">Your email address</Label>,\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/menubar.json b/apps/www/public/registry/styles/default/menubar.json
index cc3b02e116a..289f44df920 100644
--- a/apps/www/public/registry/styles/default/menubar.json
+++ b/apps/www/public/registry/styles/default/menubar.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "menubar.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"../default/ui/menubar\"\n\nconst meta: Meta<typeof Menubar> = {\n  title: \"ui/Menubar\",\n  component: Menubar,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Menubar>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            New Window <MenubarShortcut>⌘N</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled>New Incognito Window</MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Share</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Email link</MenubarItem>\n              <MenubarItem>Messages</MenubarItem>\n              <MenubarItem>Notes</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>\n            Print... <MenubarShortcut>⌘P</MenubarShortcut>\n          </MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Edit</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Find</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Search the web</MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem>Find...</MenubarItem>\n              <MenubarItem>Find Next</MenubarItem>\n              <MenubarItem>Find Previous</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>Cut</MenubarItem>\n          <MenubarItem>Copy</MenubarItem>\n          <MenubarItem>Paste</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>View</MenubarTrigger>\n        <MenubarContent>\n          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n          <MenubarCheckboxItem checked>\n            Always Show Full URLs\n          </MenubarCheckboxItem>\n          <MenubarSeparator />\n          <MenubarItem inset>\n            Reload <MenubarShortcut>⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled inset>\n            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Hide Sidebar</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Profiles</MenubarTrigger>\n        <MenubarContent>\n          <MenubarRadioGroup value=\"benoit\">\n            <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n            <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n            <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n          </MenubarRadioGroup>\n          <MenubarSeparator />\n          <MenubarItem inset>Edit...</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Add Profile...</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/default/ui/menubar\"\n\nconst meta: Meta<typeof Menubar> = {\n  title: \"ui/Menubar\",\n  component: Menubar,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Menubar>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Menubar {...args}>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            New Window <MenubarShortcut>⌘N</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled>New Incognito Window</MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Share</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Email link</MenubarItem>\n              <MenubarItem>Messages</MenubarItem>\n              <MenubarItem>Notes</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>\n            Print... <MenubarShortcut>⌘P</MenubarShortcut>\n          </MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Edit</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Find</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Search the web</MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem>Find...</MenubarItem>\n              <MenubarItem>Find Next</MenubarItem>\n              <MenubarItem>Find Previous</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>Cut</MenubarItem>\n          <MenubarItem>Copy</MenubarItem>\n          <MenubarItem>Paste</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>View</MenubarTrigger>\n        <MenubarContent>\n          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n          <MenubarCheckboxItem checked>\n            Always Show Full URLs\n          </MenubarCheckboxItem>\n          <MenubarSeparator />\n          <MenubarItem inset>\n            Reload <MenubarShortcut>⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled inset>\n            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Hide Sidebar</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Profiles</MenubarTrigger>\n        <MenubarContent>\n          <MenubarRadioGroup value=\"benoit\">\n            <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n            <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n            <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n          </MenubarRadioGroup>\n          <MenubarSeparator />\n          <MenubarItem inset>Edit...</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Add Profile...</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/navigation-menu.json b/apps/www/public/registry/styles/default/navigation-menu.json
index a7efd54271a..d2e1415e40e 100644
--- a/apps/www/public/registry/styles/default/navigation-menu.json
+++ b/apps/www/public/registry/styles/default/navigation-menu.json
@@ -7,6 +7,10 @@
     {
       "name": "navigation-menu.tsx",
       "content": "import * as React from \"react\"\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { cva } from \"class-variance-authority\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst NavigationMenu = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative z-10 flex max-w-max flex-1 items-center justify-center\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <NavigationMenuViewport />\n  </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.List\n    ref={ref}\n    className={cn(\n      \"group flex flex-1 list-none items-center justify-center space-x-1\",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst navigationMenuTriggerStyle = cva(\n  \"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\"\n)\n\nconst NavigationMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Trigger\n    ref={ref}\n    className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n    {...props}\n  >\n    {children}{\" \"}\n    <ChevronDown\n      className=\"relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuPrimitive.Trigger>\n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"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 \",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\nconst NavigationMenuViewport = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n  <div className={cn(\"absolute left-0 top-full flex justify-center\")}>\n    <NavigationMenuPrimitive.Viewport\n      className={cn(\n        \"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)]\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  </div>\n))\nNavigationMenuViewport.displayName =\n  NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Indicator\n    ref={ref}\n    className={cn(\n      \"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\",\n      className\n    )}\n    {...props}\n  >\n    <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuPrimitive.Indicator>\n))\nNavigationMenuIndicator.displayName =\n  NavigationMenuPrimitive.Indicator.displayName\n\nexport {\n  navigationMenuTriggerStyle,\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n}\n"
+    },
+    {
+      "name": "navigation-menu.stories.tsx",
+      "content": "import Link from \"next/link\"\nimport { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  navigationMenuTriggerStyle,\n} from \"@/registry/default/ui/navigation-menu\"\n\nconst meta: Meta<typeof NavigationMenu> = {\n  title: \"ui/NavigationMenu\",\n  component: NavigationMenu,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof NavigationMenu>\n\nexport const Base: Story = {\n  render: (args) => (\n    <NavigationMenu {...args}>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <Link href=\"/docs\" legacyBehavior passHref>\n            <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n              Documentation\n            </NavigationMenuLink>\n          </Link>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuLink\n            className={navigationMenuTriggerStyle()}\n            href=\"https:www.google.com\"\n          >\n            External\n          </NavigationMenuLink>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/popover.json b/apps/www/public/registry/styles/default/popover.json
index 8390f4bb625..e7f3c7467ca 100644
--- a/apps/www/public/registry/styles/default/popover.json
+++ b/apps/www/public/registry/styles/default/popover.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "popover.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { Settings2 } from \"lucide-react\"\n\nimport { Button } from \"../default/ui/button\"\nimport { Input } from \"../default/ui/input\"\nimport { Label } from \"../default/ui/label\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"../default/ui/popover\"\n\nconst meta: Meta<typeof Popover> = {\n  title: \"ui/Popover\",\n  component: Popover,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Popover>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\" className=\"w-10 rounded-full p-0\">\n          <Settings2 className=\"h-4 w-4\" />\n          <span className=\"sr-only\">Open popover</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"font-medium leading-none\">Dimensions</h4>\n            <p className=\"text-sm text-slate-500 dark:text-slate-400\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxWidth\">Max. width</Label>\n              <Input\n                id=\"maxWidth\"\n                defaultValue=\"300px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxHeight\">Max. height</Label>\n              <Input\n                id=\"maxHeight\"\n                defaultValue=\"none\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { Settings2 } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst meta: Meta<typeof Popover> = {\n  title: \"ui/Popover\",\n  component: Popover,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Popover>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Popover {...args}>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\" className=\"w-10 rounded-full p-0\">\n          <Settings2 className=\"h-4 w-4\" />\n          <span className=\"sr-only\">Open popover</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"font-medium leading-none\">Dimensions</h4>\n            <p className=\"text-sm text-slate-500 dark:text-slate-400\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxWidth\">Max. width</Label>\n              <Input\n                id=\"maxWidth\"\n                defaultValue=\"300px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxHeight\">Max. height</Label>\n              <Input\n                id=\"maxHeight\"\n                defaultValue=\"none\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/progress.json b/apps/www/public/registry/styles/default/progress.json
index f8eb86c96a0..e776ca6d171 100644
--- a/apps/www/public/registry/styles/default/progress.json
+++ b/apps/www/public/registry/styles/default/progress.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "progress.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Progress } from \"../default/ui/progress\"\n\nconst meta: Meta<typeof Progress> = {\n  title: \"ui/Progress\",\n  component: Progress,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Progress>\n\nexport const Base: Story = {\n  render: (args) => <Progress value={33} />,\n  args: {},\n}\n"
+      "content": "import { useEffect, useState } from \"react\"\nimport { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Progress } from \"@/registry/default/ui/progress\"\n\nconst meta: Meta<typeof Progress> = {\n  title: \"ui/Progress\",\n  component: Progress,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Progress>\n\nexport const Base: Story = {\n  render: (args) => <Progress {...args} />,\n  args: {\n    value: 30,\n  },\n}\nexport const Animated: Story = {\n  render: (args) => <ProgressDemo {...args} />,\n  args: {\n    value: 13,\n  },\n}\n\nconst ProgressDemo = (args: Story[\"args\"]) => {\n  const [progress, setProgress] = useState(args?.value)\n\n  useEffect(() => {\n    const timer = setTimeout(() => setProgress(66), 500)\n    return () => clearTimeout(timer)\n  }, [])\n\n  return <Progress {...args} value={progress} className=\"w-[60%]\" />\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/radio-group.json b/apps/www/public/registry/styles/default/radio-group.json
index d3ff06a8a1b..f572fff8982 100644
--- a/apps/www/public/registry/styles/default/radio-group.json
+++ b/apps/www/public/registry/styles/default/radio-group.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "radio-group.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Label } from \"../default/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"../default/ui/radio-group\"\n\nconst meta: Meta<typeof RadioGroup> = {\n  title: \"ui/RadioGroup\",\n  component: RadioGroup,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof RadioGroup>\n\nexport const Base: Story = {\n  render: (args) => (\n    <RadioGroup defaultValue=\"comfortable\">\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"default\" id=\"r1\" />\n        <Label htmlFor=\"r1\">Default</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n        <Label htmlFor=\"r2\">Comfortable</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"compact\" id=\"r3\" />\n        <Label htmlFor=\"r3\">Compact</Label>\n      </div>\n    </RadioGroup>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\"\n\nconst meta: Meta<typeof RadioGroup> = {\n  title: \"ui/RadioGroup\",\n  component: RadioGroup,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof RadioGroup>\n\nexport const Base: Story = {\n  render: (args) => (\n    <RadioGroup {...args}>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"default\" id=\"r1\" />\n        <Label htmlFor=\"r1\">Default</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n        <Label htmlFor=\"r2\">Comfortable</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"compact\" id=\"r3\" />\n        <Label htmlFor=\"r3\">Compact</Label>\n      </div>\n    </RadioGroup>\n  ),\n  args: {\n    defaultValue: \"comfortable\",\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/scroll-area.json b/apps/www/public/registry/styles/default/scroll-area.json
index 973c73ae814..f35f501746a 100644
--- a/apps/www/public/registry/styles/default/scroll-area.json
+++ b/apps/www/public/registry/styles/default/scroll-area.json
@@ -6,11 +6,11 @@
   "files": [
     {
       "name": "scroll-area.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <ScrollAreaPrimitive.Root\n    ref={ref}\n    className={cn(\"relative overflow-hidden\", className)}\n    {...props}\n  >\n    <ScrollAreaPrimitive.Viewport className=\"h-full w-full rounded-[inherit]\">\n      {children}\n    </ScrollAreaPrimitive.Viewport>\n    <ScrollBar />\n    <ScrollAreaPrimitive.Corner />\n  </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      \"flex touch-none select-none transition-colors\",\n      orientation === \"vertical\" &&\n        \"h-full w-2.5 border-l border-l-transparent p-[1px]\",\n      orientation === \"horizontal\" &&\n        \"h-2.5 border-t border-t-transparent p-[1px]\",\n      className\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.ScrollAreaThumb className=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <ScrollAreaPrimitive.Root\n    ref={ref}\n    className={cn(\"relative overflow-hidden\", className)}\n    {...props}\n  >\n    <ScrollAreaPrimitive.Viewport className=\"h-full w-full rounded-[inherit]\">\n      {children}\n    </ScrollAreaPrimitive.Viewport>\n    <ScrollBar />\n    <ScrollAreaPrimitive.Corner />\n  </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      \"flex touch-none select-none transition-colors\",\n      orientation === \"vertical\" &&\n        \"h-full w-2.5 border-l border-l-transparent p-[1px]\",\n      orientation === \"horizontal\" &&\n        \"h-2.5 border-t border-t-transparent p-[1px]\",\n      className\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.ScrollAreaThumb\n      className={cn(\n        \"relative rounded-full bg-border\",\n        orientation === \"vertical\" && \"flex-1\"\n      )}\n    />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n"
     },
     {
       "name": "scroll-area.stories.tsx",
-      "content": "import React from \"react\"\nimport { Meta, StoryObj } from \"@storybook/react\"\n\nimport { ScrollArea } from \"../default/ui/scroll-area\"\nimport { Separator } from \"../default/ui/separator\"\n\nconst meta: Meta<typeof ScrollArea> = {\n  title: \"ui/ScrollArea\",\n  component: ScrollArea,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof ScrollArea>\n\nexport const Base: Story = {\n  render: (args) => (\n    <ScrollArea className=\"h-72 w-48 rounded-md border border-slate-100 dark:border-slate-700\">\n      <div className=\"p-4\">\n        <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n        {Array.from({ length: 50 })\n          .map((_, i, a) => `v1.2.0-beta.${a.length - i}`)\n          .map((tag) => (\n            <React.Fragment>\n              <div className=\"text-sm\" key={tag}>\n                {tag}\n              </div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n      </div>\n    </ScrollArea>\n  ),\n  args: {},\n}\n"
+      "content": "import React from \"react\"\nimport { Meta, StoryObj } from \"@storybook/react\"\n\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\"\nimport { Separator } from \"@/registry/default/ui/separator\"\n\nconst meta: Meta<typeof ScrollArea> = {\n  title: \"ui/ScrollArea\",\n  component: ScrollArea,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof ScrollArea>\n\nexport const Base: Story = {\n  render: (args) => (\n    <ScrollArea {...args} className=\"h-72 w-48 rounded-md border border-slate-100 dark:border-slate-700\">\n      <div className=\"p-4\">\n        <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n        {Array.from({ length: 50 })\n          .map((_, i, a) => `v1.2.0-beta.${a.length - i}`)\n          .map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\" key={tag}>\n                {tag}\n              </div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n      </div>\n    </ScrollArea>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/select.json b/apps/www/public/registry/styles/default/select.json
index 514f67083d1..b0381f6b119 100644
--- a/apps/www/public/registry/styles/default/select.json
+++ b/apps/www/public/registry/styles/default/select.json
@@ -7,6 +7,10 @@
     {
       "name": "select.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { Check, ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <ChevronDown className=\"h-4 w-4 opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover 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\",\n        position === \"popper\" &&\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n        className\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectPrimitive.Viewport\n        className={cn(\n          \"p-1\",\n          position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"py-1.5 pl-8 pr-2 text-sm font-semibold\", className)}\n    {...props}\n  />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex w-full 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\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n}\n"
+    },
+    {
+      "name": "select.stories.tsx",
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst meta: Meta<typeof Select> = {\n  title: \"ui/Select\",\n  component: Select,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Select>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Select {...args}>\n      <SelectTrigger className=\"w-[180px]\">\n        <SelectValue placeholder=\"Select a fruit\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>Fruits</SelectLabel>\n          <SelectItem value=\"apple\">Apple</SelectItem>\n          <SelectItem value=\"banana\">Banana</SelectItem>\n          <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          <SelectItem value=\"grapes\">Grapes</SelectItem>\n          <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n        </SelectGroup>\n        <SelectSeparator />\n        <SelectGroup>\n          <SelectLabel>Vegetables</SelectLabel>\n          <SelectItem value=\"aubergine\">Aubergine</SelectItem>\n          <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n          <SelectItem value=\"carrot\" disabled>\n            Carrot\n          </SelectItem>\n          <SelectItem value=\"courgette\">Courgette</SelectItem>\n          <SelectItem value=\"leek\">Leek</SelectItem>\n        </SelectGroup>\n        <SelectSeparator />\n        <SelectGroup>\n          <SelectLabel>Meat</SelectLabel>\n          <SelectItem value=\"beef\">Beef</SelectItem>\n          <SelectItem value=\"chicken\">Chicken</SelectItem>\n          <SelectItem value=\"lamb\">Lamb</SelectItem>\n          <SelectItem value=\"pork\">Pork</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/separator.json b/apps/www/public/registry/styles/default/separator.json
index 41e25ded933..46b3b7d5b21 100644
--- a/apps/www/public/registry/styles/default/separator.json
+++ b/apps/www/public/registry/styles/default/separator.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "separator.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Separator } from \"../default/ui/separator\"\n\nconst meta: Meta<typeof Separator> = {\n  title: \"ui/Separator\",\n  component: Separator,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Separator>\n\nexport const Base: Story = {\n  render: (args) => (\n    <div>\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm font-medium leading-none\">Radix Primitives</h4>\n        <p className=\"text-sm text-slate-500 dark:text-slate-400\">\n          An open-source UI component library.\n        </p>\n      </div>\n      <Separator className=\"my-4\" />\n      <div className=\"flex h-5 items-center space-x-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </div>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Separator } from \"@/registry/default/ui/separator\"\n\nconst meta: Meta<typeof Separator> = {\n  title: \"ui/Separator\",\n  component: Separator,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Separator>\n\nexport const Base: Story = {\n  render: (args) => (\n    <div>\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm font-medium leading-none\">Radix Primitives</h4>\n        <p className=\"text-sm text-slate-500 dark:text-slate-400\">\n          An open-source UI component library.\n        </p>\n      </div>\n      <Separator {...args} className=\"my-4\" />\n      <div className=\"flex h-5 items-center space-x-4 text-sm\">\n        <div>Blog</div>\n        <Separator {...args} orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator {...args} orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </div>\n  ),\n  args: {\n    orientation: \"horizontal\",\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/sheet.json b/apps/www/public/registry/styles/default/sheet.json
index f755a0875e4..1baf21595c7 100644
--- a/apps/www/public/registry/styles/default/sheet.json
+++ b/apps/www/public/registry/styles/default/sheet.json
@@ -7,6 +7,10 @@
     {
       "name": "sheet.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = ({\n  className,\n  ...props\n}: SheetPrimitive.DialogPortalProps) => (\n  <SheetPrimitive.Portal className={cn(className)} {...props} />\n)\nSheetPortal.displayName = SheetPrimitive.Portal.displayName\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay\n    className={cn(\n      \"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n  \"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\",\n  {\n    variants: {\n      side: {\n        top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n        bottom:\n          \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n        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\",\n        right:\n          \"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\",\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  }\n)\n\ninterface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n  <SheetPortal>\n    <SheetOverlay />\n    <SheetPrimitive.Content\n      ref={ref}\n      className={cn(sheetVariants({ side }), className)}\n      {...props}\n    >\n      {children}\n      <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\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </SheetPrimitive.Close>\n    </SheetPrimitive.Content>\n  </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold text-foreground\", className)}\n    {...props}\n  />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n"
+    },
+    {
+      "name": "sheet.stories.tsx",
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/default/ui/sheet\"\n\nconst meta: Meta<typeof Sheet> = {\n  title: \"ui/Sheet\",\n  component: Sheet,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Sheet>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Sheet {...args}>\n      <SheetTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </SheetTrigger>\n      <SheetContent>\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when youre done.\n          </SheetDescription>\n        </SheetHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose asChild>\n            <Button type=\"submit\">Save changes</Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/skeleton.json b/apps/www/public/registry/styles/default/skeleton.json
index 71d6d85f4d8..28d3cc514e6 100644
--- a/apps/www/public/registry/styles/default/skeleton.json
+++ b/apps/www/public/registry/styles/default/skeleton.json
@@ -4,6 +4,10 @@
     {
       "name": "skeleton.tsx",
       "content": "import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\"animate-pulse rounded-md bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n"
+    },
+    {
+      "name": "skeleton.stories.tsx",
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst meta: Meta<typeof Skeleton> = {\n  title: \"ui/Skeleton\",\n  component: Skeleton,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Skeleton>\n\nexport const Base: Story = {\n  render: (args) => (\n    <div className=\"flex items-center space-x-4\">\n      <Skeleton {...args} className=\"h-12 w-12 rounded-full\" />\n      <div className=\"space-y-2\">\n        <Skeleton {...args} className=\"h-4 w-[250px]\" />\n        <Skeleton {...args} className=\"h-4 w-[200px]\" />\n      </div>\n    </div>\n  ),\n  args: {},\n}"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/slider.json b/apps/www/public/registry/styles/default/slider.json
index d6d9831b795..1c79b221f84 100644
--- a/apps/www/public/registry/styles/default/slider.json
+++ b/apps/www/public/registry/styles/default/slider.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "slider.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Slider } from \"../default/ui/slider\"\n\nconst meta: Meta<typeof Slider> = {\n  title: \"ui/Slider\",\n  component: Slider,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Slider>\n\nexport const Base: Story = {\n  args: {\n    defaultValue: [33],\n    max: 100,\n    step: 1,\n  },\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Slider } from \"@/registry/default/ui/slider\"\n\nconst meta: Meta<typeof Slider> = {\n  title: \"ui/Slider\",\n  component: Slider,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Slider>\n\nexport const Base: Story = {\n  args: {\n    defaultValue: [33],\n    max: 100,\n    step: 1,\n  },\n}\n\nexport const Interval: Story = {\n  args: {\n    defaultValue: [33, 88],\n    max: 100,\n    step: 1,\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/switch.json b/apps/www/public/registry/styles/default/switch.json
index 8508cbfc599..3ae75522ded 100644
--- a/apps/www/public/registry/styles/default/switch.json
+++ b/apps/www/public/registry/styles/default/switch.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "switch.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Label } from \"../default/ui/label\"\nimport { Switch } from \"../default/ui/switch\"\n\nconst meta: Meta<typeof Switch> = {\n  title: \"ui/Switch\",\n  component: Switch,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Switch>\n\nexport const Base: Story = {\n  render: (args) => (\n    <div className=\"flex items-center space-x-2\">\n      <Switch id=\"airplane-mode\" />\n      <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n    </div>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nconst meta: Meta<typeof Switch> = {\n  title: \"ui/Switch\",\n  component: Switch,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Switch>\n\nexport const Base: Story = {\n  render: (args) => (\n    <div className=\"flex items-center space-x-2\">\n      <Switch {...args} id=\"airplane-mode\" />\n      <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n    </div>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/table.json b/apps/www/public/registry/styles/default/table.json
index 5f61c81b3b9..d6967398eb9 100644
--- a/apps/www/public/registry/styles/default/table.json
+++ b/apps/www/public/registry/styles/default/table.json
@@ -3,7 +3,11 @@
   "files": [
     {
       "name": "table.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\"w-full caption-bottom text-sm\", className)}\n      {...props}\n    />\n  </div>\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(\"[&_tr]:border-b\", className)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\"[&_tr:last-child]:border-0\", className)}\n    {...props}\n  />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\"bg-primary font-medium text-primary-foreground\", className)}\n    {...props}\n  />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={cn(\n      \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n      className\n    )}\n    {...props}\n  />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      \"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0\",\n      className\n    )}\n    {...props}\n  />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\"p-4 align-middle [&:has([role=checkbox])]:pr-0\", className)}\n    {...props}\n  />\n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n"
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\"w-full caption-bottom text-sm\", className)}\n      {...props}\n    />\n  </div>\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(\"[&_tr]:border-b\", className)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\"[&_tr:last-child]:border-0\", className)}\n    {...props}\n  />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\"bg-primary font-medium text-primary-foreground\", className)}\n    {...props}\n  />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={cn(\n      \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n      className\n    )}\n    {...props}\n  />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      \"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0\",\n      className\n    )}\n    {...props}\n  />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\"p-4 align-middle [&:has([role=checkbox])]:pr-0\", className)}\n    {...props}\n  />\n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n"
+    },
+    {
+      "name": "table.stories.tsx",
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\n\nconst meta: Meta<typeof Table> = {\n  title: \"ui/Table\",\n  component: Table,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Table>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Table {...args}>\n      <TableCaption>A list of your recent invoices.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[100px]\">Invoice</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead>Method</TableHead>\n          <TableHead className=\"text-right\">Amount</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invoices.map((invoice) => (\n          <TableRow key={invoice.invoice}>\n            <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n            <TableCell>{invoice.paymentStatus}</TableCell>\n            <TableCell>{invoice.paymentMethod}</TableCell>\n            <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  ),\n  args: {},\n}\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/tabs.json b/apps/www/public/registry/styles/default/tabs.json
index 8c3540a8036..ea961b9b824 100644
--- a/apps/www/public/registry/styles/default/tabs.json
+++ b/apps/www/public/registry/styles/default/tabs.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "tabs.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Button } from \"../default/ui/button\"\nimport { Input } from \"../default/ui/input\"\nimport { Label } from \"../default/ui/label\"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"../default/ui/tabs\"\n\nconst meta: Meta<typeof Tabs> = {\n  title: \"ui/Tabs\",\n  component: Tabs,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Tabs>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Tabs {...args} className=\"w-[400px]\">\n      <TabsList>\n        <TabsTrigger value=\"account\">Account</TabsTrigger>\n        <TabsTrigger value=\"password\">Password</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"account\">\n        <p className=\"text-sm text-slate-500 dark:text-slate-400\">\n          Make changes to your account here. Click save when you're done.\n        </p>\n        <div className=\"grid gap-2 py-4\">\n          <div className=\"space-y-1\">\n            <Label htmlFor=\"name\">Name</Label>\n            <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n          </div>\n          <div className=\"space-y-1\">\n            <Label htmlFor=\"username\">Username</Label>\n            <Input id=\"username\" defaultValue=\"@peduarte\" />\n          </div>\n        </div>\n        <div className=\"flex\">\n          <Button>Save changes</Button>\n        </div>\n      </TabsContent>\n      <TabsContent value=\"password\">\n        <p className=\"text-sm text-slate-500 dark:text-slate-400\">\n          Change your password here. After saving, you'll be logged out.\n        </p>\n        <div className=\"grid gap-2 py-4\">\n          <div className=\"space-y-1\">\n            <Label htmlFor=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div className=\"space-y-1\">\n            <Label htmlFor=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </div>\n        <div className=\"flex\">\n          <Button>Save password</Button>\n        </div>\n      </TabsContent>\n    </Tabs>\n  ),\n  args: {\n    defaultValue: \"account\",\n  },\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\"\n\nconst meta: Meta<typeof Tabs> = {\n  title: \"ui/Tabs\",\n  component: Tabs,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Tabs>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Tabs {...args} className=\"w-[400px]\">\n      <TabsList>\n        <TabsTrigger value=\"account\">Account</TabsTrigger>\n        <TabsTrigger value=\"password\">Password</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"account\">\n        <p className=\"text-sm text-slate-500 dark:text-slate-400\">\n          Make changes to your account here. Click save when you're done.\n        </p>\n        <div className=\"grid gap-2 py-4\">\n          <div className=\"space-y-1\">\n            <Label htmlFor=\"name\">Name</Label>\n            <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n          </div>\n          <div className=\"space-y-1\">\n            <Label htmlFor=\"username\">Username</Label>\n            <Input id=\"username\" defaultValue=\"@peduarte\" />\n          </div>\n        </div>\n        <div className=\"flex\">\n          <Button>Save changes</Button>\n        </div>\n      </TabsContent>\n      <TabsContent value=\"password\">\n        <p className=\"text-sm text-slate-500 dark:text-slate-400\">\n          Change your password here. After saving, you'll be logged out.\n        </p>\n        <div className=\"grid gap-2 py-4\">\n          <div className=\"space-y-1\">\n            <Label htmlFor=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div className=\"space-y-1\">\n            <Label htmlFor=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </div>\n        <div className=\"flex\">\n          <Button>Save password</Button>\n        </div>\n      </TabsContent>\n    </Tabs>\n  ),\n  args: {\n    defaultValue: \"account\",\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/textarea.json b/apps/www/public/registry/styles/default/textarea.json
index 1b94cf2117b..33ac59ce012 100644
--- a/apps/www/public/registry/styles/default/textarea.json
+++ b/apps/www/public/registry/styles/default/textarea.json
@@ -4,6 +4,10 @@
     {
       "name": "textarea.tsx",
       "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <textarea\n        className={cn(\n          \"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\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n"
+    },
+    {
+      "name": "textarea.stories.tsx",
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\n\nconst meta: Meta<typeof Textarea> = {\n  title: \"ui/Textarea\",\n  component: Textarea,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Textarea>\n\nexport const Default: Story = {\n  render: (args) => <Textarea {...args} />,\n  args: {\n    placeholder: \"Type your message here.\",\n  },\n}\n\nexport const Disabled: Story = {\n  render: (args) => <Textarea {...args} />,\n  args: {\n    ...Default.args,\n    disabled: true,\n  },\n}\n\nexport const WithLabel: Story = {\n  render: (args) => (\n    <div className=\"grid w-full gap-1.5\">\n      <Label htmlFor=\"message\">Your message</Label>\n      <Textarea {...args} id=\"message\" />\n    </div>\n  ),\n  args: { ...Default.args },\n}\n\nexport const WithText: Story = {\n  render: (args) => (\n    <div className=\"grid w-full gap-1.5\">\n      <Label htmlFor=\"message-2\">Your Message</Label>\n      <Textarea {...args} id=\"message-2\" />\n      <p className=\"text-sm text-slate-500\">\n        Your message will be copied to the support team.\n      </p>\n    </div>\n  ),\n  args: { ...Default.args },\n}\n\nexport const WithButton: Story = {\n  render: (args) => (\n    <div className=\"grid w-full gap-2\">\n      <Textarea {...args} />\n      <Button>Send message</Button>\n    </div>\n  ),\n  args: { ...Default.args },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/toggle.json b/apps/www/public/registry/styles/default/toggle.json
index 3bb19f632e5..6790a532862 100644
--- a/apps/www/public/registry/styles/default/toggle.json
+++ b/apps/www/public/registry/styles/default/toggle.json
@@ -7,6 +7,10 @@
     {
       "name": "toggle.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"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\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-10 px-3\",\n        sm: \"h-9 px-2.5\",\n        lg: \"h-11 px-5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst Toggle = React.forwardRef<\n  React.ElementRef<typeof TogglePrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive.Root\n    ref={ref}\n    className={cn(toggleVariants({ variant, size, className }))}\n    {...props}\n  />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n"
+    },
+    {
+      "name": "toggle.stories.tsx",
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { Bold, Italic, Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nconst meta: Meta<typeof Toggle> = {\n  title: \"ui/Toggle\",\n  component: Toggle,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Toggle>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Toggle {...args} aria-label=\"Toggle italic\">\n      <Bold className=\"h-4 w-4\" />\n    </Toggle>\n  ),\n  args: {},\n}\n\nexport const Outline: Story = {\n  render: (args) => (\n    <Toggle {...args} aria-label=\"Toggle italic\">\n      <Italic className=\"h-4 w-4\" />\n    </Toggle>\n  ),\n  args: {\n    variant: \"outline\",\n  },\n}\n\nexport const WithText: Story = {\n  render: (args) => (\n    <Toggle {...args} aria-label=\"Toggle italic\">\n      <Italic className=\"mr-2 h-4 w-4\" />\n      Italic\n    </Toggle>\n  ),\n  args: {},\n}\n\nexport const Small: Story = {\n  render: (args) => (\n    <Toggle {...args} aria-label=\"Toggle italic\">\n      <Italic className=\"h-4 w-4\" />\n    </Toggle>\n  ),\n  args: {\n    size: \"sm\",\n  },\n}\n\nexport const Large: Story = {\n  render: (args) => (\n    <Toggle {...args} aria-label=\"Toggle italic\">\n      <Italic className=\"h-4 w-4\" />\n    </Toggle>\n  ),\n  args: {\n    size: \"lg\",\n  },\n}\n\nexport const Disabled: Story = {\n  render: (args) => (\n    <Toggle {...args} aria-label=\"Toggle italic\">\n      <Underline className=\"h-4 w-4\" />\n    </Toggle>\n  ),\n  args: {\n    disabled: true,\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/default/tooltip.json b/apps/www/public/registry/styles/default/tooltip.json
index 14ad64a63e8..4857e53baed 100644
--- a/apps/www/public/registry/styles/default/tooltip.json
+++ b/apps/www/public/registry/styles/default/tooltip.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "tooltip.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Button } from \"../default/ui/button\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../default/ui/tooltip\"\n\nconst meta: Meta<typeof Tooltip> = {\n  title: \"ui/Tooltip\",\n  component: Tooltip,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Tooltip>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <Button variant=\"outline\" className=\"w-10 rounded-full p-0\">\n          <Plus className=\"h-4 w-4\" />\n          <span className=\"sr-only\">Add</span>\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nconst meta: Meta<typeof Tooltip> = {\n  title: \"ui/Tooltip\",\n  component: Tooltip,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Tooltip>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Tooltip {...args}>\n      <TooltipTrigger asChild>\n        <Button variant=\"outline\" className=\"w-10 rounded-full p-0\">\n          <Plus className=\"h-4 w-4\" />\n          <span className=\"sr-only\">Add</span>\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/accordion.json b/apps/www/public/registry/styles/new-york/accordion.json
index 4b4e5b0c45b..f8a6eed07fa 100644
--- a/apps/www/public/registry/styles/new-york/accordion.json
+++ b/apps/www/public/registry/styles/new-york/accordion.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "accordion.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"../default/ui/accordion\"\n\nconst meta: Meta<typeof Accordion> = {\n  title: \"ui/Accordion\",\n  component: Accordion,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Accordion>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Accordion {...args}>\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It adheres to the WAI-ARIA design pattern.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it styled?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It comes with default styles that matches the other components'\n          aesthetic.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Is it animated?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It's animated by default, but you can disable it if you prefer.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  ),\n  args: {\n    type: \"single\",\n    collapsible: true,\n  },\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\"\n\nconst meta: Meta<typeof Accordion> = {\n  title: \"ui/Accordion\",\n  component: Accordion,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Accordion>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Accordion {...args}>\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It adheres to the WAI-ARIA design pattern.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it styled?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It comes with default styles that matches the other components'\n          aesthetic.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Is it animated?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It's animated by default, but you can disable it if you prefer.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  ),\n  args: {\n    type: \"single\",\n    collapsible: true,\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/alert-dialog.json b/apps/www/public/registry/styles/new-york/alert-dialog.json
index 87cdd9b6b50..fad07b895af 100644
--- a/apps/www/public/registry/styles/new-york/alert-dialog.json
+++ b/apps/www/public/registry/styles/new-york/alert-dialog.json
@@ -13,7 +13,7 @@
     },
     {
       "name": "alert-dialog.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"../default/ui/alert-dialog\"\nimport { Button } from \"../default/ui/button\"\n\nconst meta: Meta<typeof AlertDialog> = {\n  title: \"ui/AlertDialog\",\n  component: AlertDialog,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof AlertDialog>\n\nexport const Base: Story = {\n  render: () => (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you sure absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nconst meta: Meta<typeof AlertDialog> = {\n  title: \"ui/AlertDialog\",\n  component: AlertDialog,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof AlertDialog>\n\nexport const Base: Story = {\n  render: (args) => (\n    <AlertDialog {...args}>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you sure absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/alert.json b/apps/www/public/registry/styles/new-york/alert.json
index 221afd4eae8..cc39a6dc727 100644
--- a/apps/www/public/registry/styles/new-york/alert.json
+++ b/apps/www/public/registry/styles/new-york/alert.json
@@ -4,6 +4,10 @@
     {
       "name": "alert.tsx",
       "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-background text-foreground\",\n        destructive:\n          \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst Alert = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"alert\"\n    className={cn(alertVariants({ variant }), className)}\n    {...props}\n  />\n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    className={cn(\"mb-1 font-medium leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm [&_p]:leading-relaxed\", className)}\n    {...props}\n  />\n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n"
+    },
+    {
+      "name": "alert.stories.tsx",
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { AlertCircle, Terminal } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nconst meta: Meta<typeof Alert> = {\n  title: \"ui/Alert\",\n  component: Alert,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Alert>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Alert {...args}>\n      <Terminal className=\"h-4 w-4\" />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        You can add components to your app using the cli.\n      </AlertDescription>\n    </Alert>\n  ),\n  args: {\n    variant: \"default\",\n  },\n}\n\nexport const Destructive: Story = {\n  render: (args) => (\n    <Alert {...args}>\n      <AlertCircle className=\"h-4 w-4\" />\n      <AlertTitle>Error</AlertTitle>\n      <AlertDescription>\n        Your session has expired. Please log in again.\n      </AlertDescription>\n    </Alert>\n  ),\n  args: {\n    variant: \"destructive\",\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/aspect-ratio.json b/apps/www/public/registry/styles/new-york/aspect-ratio.json
index e6e4cdc3289..858afdecff0 100644
--- a/apps/www/public/registry/styles/new-york/aspect-ratio.json
+++ b/apps/www/public/registry/styles/new-york/aspect-ratio.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "aspect-ratio.stories.tsx",
-      "content": "import Image from \"next/image\"\nimport { Meta, StoryObj } from \"@storybook/react\"\n\nimport { AspectRatio } from \"@/registry/default/ui/aspect-ratio\"\n\nconst meta: Meta<typeof AspectRatio> = {\n  title: \"ui/AspectRatio\",\n  component: AspectRatio,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof AspectRatio>\n\nexport const Base: Story = {\n  render: () => (\n    <AspectRatio ratio={16 / 9} className=\"bg-slate-50 dark:bg-slate-800\">\n      <Image\n        src=\"https://images.unsplash.com/photo-1576075796033-848c2a5f3696?w=800&dpr=2&q=80\"\n        alt=\"Photo by Alvaro Pinot\"\n        fill\n        className=\"rounded-md object-cover\"\n      />\n    </AspectRatio>\n  ),\n  args: {},\n}\n"
+      "content": "import Image from \"next/image\"\nimport { Meta, StoryObj } from \"@storybook/react\"\n\nimport { AspectRatio } from \"@/registry/default/ui/aspect-ratio\"\n\nconst meta: Meta<typeof AspectRatio> = {\n  title: \"ui/AspectRatio\",\n  component: AspectRatio,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof AspectRatio>\n\nexport const Base: Story = {\n  render: (args) => (\n    <AspectRatio {...args} className=\"bg-slate-50 dark:bg-slate-800\">\n      <Image\n        src=\"https://images.unsplash.com/photo-1576075796033-848c2a5f3696?w=800&dpr=2&q=80\"\n        alt=\"Photo by Alvaro Pinot\"\n        fill\n        className=\"rounded-md object-cover\"\n      />\n    </AspectRatio>\n  ),\n  args: {\n    ratio: 16 / 9,\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/avatar.json b/apps/www/public/registry/styles/new-york/avatar.json
index 7dfc8768e48..ad595066c23 100644
--- a/apps/www/public/registry/styles/new-york/avatar.json
+++ b/apps/www/public/registry/styles/new-york/avatar.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "avatar.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"../default/ui/avatar\"\n\nconst meta: Meta<typeof Avatar> = {\n  title: \"ui/Avatar\",\n  component: Avatar,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Avatar>\n\nexport const Base: Story = {\n  render: () => (\n    <Avatar>\n      <AvatarImage src=\"https://github.com/shadcn.png\" />\n      <AvatarFallback>CN</AvatarFallback>\n    </Avatar>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nconst meta: Meta<typeof Avatar> = {\n  title: \"ui/Avatar\",\n  component: Avatar,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Avatar>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Avatar {...args}>\n      <AvatarImage src=\"https://github.com/shadcn.png\" />\n      <AvatarFallback>CN</AvatarFallback>\n    </Avatar>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/badge.json b/apps/www/public/registry/styles/new-york/badge.json
index 416ca7812ed..5c7689b8af5 100644
--- a/apps/www/public/registry/styles/new-york/badge.json
+++ b/apps/www/public/registry/styles/new-york/badge.json
@@ -4,6 +4,10 @@
     {
       "name": "badge.tsx",
       "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"inline-flex items-center rounded-md 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\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        destructive:\n          \"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80\",\n        outline: \"text-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n  return (\n    <div className={cn(badgeVariants({ variant }), className)} {...props} />\n  )\n}\n\nexport { Badge, badgeVariants }\n"
+    },
+    {
+      "name": "badge.stories.tsx",
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\n\nconst meta: Meta<typeof Badge> = {\n  title: \"ui/Badge\",\n  component: Badge,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Badge>\n\nexport const Base: Story = {\n  render: (args) => <Badge {...args}>Badge</Badge>,\n  args: {},\n}\n\nexport const Secondary: Story = {\n  render: (args) => <Badge {...args}>Badge</Badge>,\n  args: {\n    variant: \"secondary\",\n  },\n}\n\nexport const Destructive: Story = {\n  render: (args) => <Badge {...args}>Badge</Badge>,\n  args: {\n    variant: \"destructive\",\n  },\n}\n\nexport const Outline: Story = {\n  render: (args) => <Badge {...args}>Badge</Badge>,\n  args: {\n    variant: \"outline\",\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/button.json b/apps/www/public/registry/styles/new-york/button.json
index 7f667747851..3ff1b0cbbee 100644
--- a/apps/www/public/registry/styles/new-york/button.json
+++ b/apps/www/public/registry/styles/new-york/button.json
@@ -7,6 +7,10 @@
     {
       "name": "button.tsx",
       "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-sm 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-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-8\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"
+    },
+    {
+      "name": "button.stories.tsx",
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { Loader2, Mail } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nconst meta: Meta<typeof Button> = {\n  title: \"ui/Button\",\n  component: Button,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Button>\n\nexport const Base: Story = {\n  render: (args) => <Button {...args}>Button</Button>,\n  args: {},\n}\n\nexport const Outline: Story = {\n  render: (args) => <Button {...args}>Button</Button>,\n  args: {\n    variant: \"outline\",\n  },\n}\n\nexport const Ghost: Story = {\n  render: (args) => <Button {...args}>Button</Button>,\n  args: {\n    variant: \"ghost\",\n  },\n}\n\nexport const Secondary: Story = {\n  render: (args) => <Button {...args}>Button</Button>,\n  args: {\n    variant: \"secondary\",\n  },\n}\n\nexport const Destructive: Story = {\n  render: (args) => <Button {...args}>Button</Button>,\n  args: {\n    variant: \"destructive\",\n  },\n}\n\nexport const Link: Story = {\n  render: (args) => <Button {...args}>Button</Button>,\n  args: {\n    variant: \"link\",\n  },\n}\n\nexport const Loading: Story = {\n  render: (args) => (\n    <Button {...args}>\n      <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />\n      Button\n    </Button>\n  ),\n  args: {\n    variant: \"outline\",\n  },\n}\n\nexport const WithIcon: Story = {\n  render: (args) => (\n    <Button {...args}>\n      <Mail className=\"mr-2 h-4 w-4\" /> Login with Email Button\n    </Button>\n  ),\n  args: {\n    variant: \"secondary\",\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/calendar.json b/apps/www/public/registry/styles/new-york/calendar.json
index 0998cfa90ae..f594337a1be 100644
--- a/apps/www/public/registry/styles/new-york/calendar.json
+++ b/apps/www/public/registry/styles/new-york/calendar.json
@@ -11,6 +11,10 @@
     {
       "name": "calendar.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent\",\n          props.mode === \"range\"\n            ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\"\n        ),\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_start: \"day-range-start\",\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside: \"text-muted-foreground opacity-50\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeftIcon className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRightIcon className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"
+    },
+    {
+      "name": "calendar.stories.tsx",
+      "content": "import { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Meta, StoryObj } from \"@storybook/react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport * as z from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\nimport { Toaster } from \"@/registry/default/ui/toaster\"\nimport { useToast } from \"@/registry/default/ui/use-toast\"\n\nconst meta: Meta<typeof Calendar> = {\n  title: \"ui/Calendar\",\n  component: Calendar,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Calendar>\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport const Base: Story = {\n  args: {\n    mode: \"single\",\n    className: \"rounded-md border w-fit\",\n  },\n}\n\nexport const CalendarForm: Story = {\n  args: {\n    mode: \"single\",\n  },\n  render: (args) => <ExampleCalendarForm {...args} />,\n}\n\nconst ExampleCalendarForm = (args: Story[\"args\"]) => {\n  const { toast } = useToast()\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <>\n      <Form {...form}>\n        <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n          <FormField\n            control={form.control}\n            name=\"dob\"\n            render={({ field }) => (\n              <FormItem className=\"flex flex-col\">\n                <FormLabel>Date of birth</FormLabel>\n                <Popover>\n                  <PopoverTrigger asChild>\n                    <FormControl>\n                      <Button\n                        variant={\"outline\"}\n                        className={cn(\n                          \"w-[240px] pl-3 text-left font-normal\",\n                          !field.value && \"text-muted-foreground\"\n                        )}\n                      >\n                        {field.value ? (\n                          format(field.value, \"PPP\")\n                        ) : (\n                          <span>Pick a date</span>\n                        )}\n                        <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                      </Button>\n                    </FormControl>\n                  </PopoverTrigger>\n                  <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                    <Calendar\n                      {...args}\n                      mode=\"single\"\n                      selected={field.value}\n                      onSelect={field.onChange}\n                      disabled={(date) =>\n                        date > new Date() || date < new Date(\"1900-01-01\")\n                      }\n                      initialFocus\n                    />\n                  </PopoverContent>\n                </Popover>\n                <FormDescription>\n                  Your date of birth is used to calculate your age.\n                </FormDescription>\n                <FormMessage />\n              </FormItem>\n            )}\n          />\n          <Button type=\"submit\">Submit</Button>\n        </form>\n      </Form>\n      <Toaster />\n    </>\n  )\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/card.json b/apps/www/public/registry/styles/new-york/card.json
index af7ee0e12e5..f4272dd48e5 100644
--- a/apps/www/public/registry/styles/new-york/card.json
+++ b/apps/www/public/registry/styles/new-york/card.json
@@ -4,6 +4,10 @@
     {
       "name": "card.tsx",
       "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-xl border bg-card text-card-foreground shadow\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\"font-semibold leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n"
+    },
+    {
+      "name": "card.stories.tsx",
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { BellRing, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nconst meta: Meta<typeof Card> = {\n  title: \"ui/Card\",\n  component: Card,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Card>\n\nconst notifications = [\n  {\n    title: \"Your call has been confirmed.\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"You have a new message!\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"Your subscription is expiring soon!\",\n    description: \"2 hours ago\",\n  },\n]\n\nexport const Base: Story = {\n  render: (args) => (\n    <Card {...args} className={cn(\"w-[380px]\")}>\n      <CardHeader>\n        <CardTitle>Notifications</CardTitle>\n        <CardDescription>You have 3 unread messages.</CardDescription>\n      </CardHeader>\n      <CardContent className=\"grid gap-4\">\n        <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n          <BellRing />\n          <div className=\"flex-1 space-y-1\">\n            <p className=\"text-sm font-normal leading-none\">\n              Push Notifications\n            </p>\n            <p className=\"text-sm text-muted-foreground\">\n              Send notifications to device.\n            </p>\n          </div>\n          <Switch />\n        </div>\n        <div>\n          {notifications.map((notification, index) => (\n            <div\n              key={index}\n              className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n            >\n              <span className=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n              <div className=\"space-y-1\">\n                <p className=\"text-sm font-normal leading-none\">\n                  {notification.title}\n                </p>\n                <p className=\"text-sm text-muted-foreground\">\n                  {notification.description}\n                </p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button className=\"w-full\">\n          <Check className=\"mr-2 h-4 w-4\" /> Mark all as read\n        </Button>\n      </CardFooter>\n    </Card>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/checkbox.json b/apps/www/public/registry/styles/new-york/checkbox.json
index cec41b5cf1d..1f09a27cd2b 100644
--- a/apps/www/public/registry/styles/new-york/checkbox.json
+++ b/apps/www/public/registry/styles/new-york/checkbox.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "checkbox.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Checkbox } from \"../default/ui/checkbox\"\n\nconst meta: Meta<typeof Checkbox> = {\n  title: \"ui/Checkbox\",\n  component: Checkbox,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Checkbox>\n\nexport const Base: Story = {\n  render: (args) => (\n    <div className=\"items-top flex space-x-2\">\n      <Checkbox {...args} id=\"terms1\" />\n      <div className=\"grid gap-1.5 leading-none\">\n        <label\n          htmlFor=\"terms1\"\n          className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n        >\n          Accept terms and conditions\n        </label>\n        <p className=\"text-sm text-slate-500 dark:text-slate-400\">\n          You agree to our Terms of Service and Privacy Policy.\n        </p>\n      </div>\n    </div>\n  ),\n  args: {},\n}\nexport const Disabled: Story = {\n  render: (args) => (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox {...args} id=\"terms2\" />\n      <label\n        htmlFor=\"terms2\"\n        className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n    </div>\n  ),\n  args: {\n    disabled: true,\n  },\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\n\nconst meta: Meta<typeof Checkbox> = {\n  title: \"ui/Checkbox\",\n  component: Checkbox,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Checkbox>\n\nexport const Base: Story = {\n  render: (args) => (\n    <div className=\"items-top flex space-x-2\">\n      <Checkbox {...args} id=\"terms1\" />\n      <div className=\"grid gap-1.5 leading-none\">\n        <label\n          htmlFor=\"terms1\"\n          className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n        >\n          Accept terms and conditions\n        </label>\n        <p className=\"text-sm text-slate-500 dark:text-slate-400\">\n          You agree to our Terms of Service and Privacy Policy.\n        </p>\n      </div>\n    </div>\n  ),\n  args: {},\n}\nexport const Disabled: Story = {\n  render: (args) => (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox {...args} id=\"terms2\" />\n      <label\n        htmlFor=\"terms2\"\n        className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n    </div>\n  ),\n  args: {\n    disabled: true,\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/collapsible.json b/apps/www/public/registry/styles/new-york/collapsible.json
index 4c65494b483..98ab046b1da 100644
--- a/apps/www/public/registry/styles/new-york/collapsible.json
+++ b/apps/www/public/registry/styles/new-york/collapsible.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "collapsible.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { ChevronsUpDown, Plus, X } from \"lucide-react\"\n\nimport { Button } from \"../default/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"../default/ui/collapsible\"\n\nconst meta: Meta<typeof Collapsible> = {\n  title: \"ui/Collapsible\",\n  component: Collapsible,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Collapsible>\n\nexport const Closed: Story = {\n  render: (args) => (\n    <Collapsible {...args} className=\"w-[350px] space-y-2\">\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\" className=\"w-9 p-0\">\n            <ChevronsUpDown className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  ),\n  args: {\n    open: false,\n    onOpenChange: () => null,\n  },\n}\nexport const Open: Story = {\n  render: (args) => (\n    <Collapsible {...args} className=\"w-[350px] space-y-2\">\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\" className=\"w-9 p-0\">\n            <ChevronsUpDown className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  ),\n  args: {\n    open: true,\n    onOpenChange: () => null,\n  },\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { ChevronsUpDown, Plus, X } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\n\nconst meta: Meta<typeof Collapsible> = {\n  title: \"ui/Collapsible\",\n  component: Collapsible,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Collapsible>\n\nexport const Closed: Story = {\n  render: (args) => (\n    <Collapsible {...args} className=\"w-[350px] space-y-2\">\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\" className=\"w-9 p-0\">\n            <ChevronsUpDown className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  ),\n  args: {\n    open: false,\n    onOpenChange: () => null,\n  },\n}\nexport const Open: Story = {\n  render: (args) => (\n    <Collapsible {...args} className=\"w-[350px] space-y-2\">\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\" className=\"w-9 p-0\">\n            <ChevronsUpDown className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  ),\n  args: {\n    open: true,\n    onOpenChange: () => null,\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/command.json b/apps/www/public/registry/styles/new-york/command.json
index e54eb15b9cf..305eb5b8ff6 100644
--- a/apps/www/public/registry/styles/new-york/command.json
+++ b/apps/www/public/registry/styles/new-york/command.json
@@ -10,6 +10,10 @@
     {
       "name": "command.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DialogProps } from \"@radix-ui/react-dialog\"\nimport { MagnifyingGlassIcon } from \"@radix-ui/react-icons\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Dialog, DialogContent } from \"@/registry/new-york/ui/dialog\"\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\ninterface CommandDialogProps extends DialogProps {}\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0\">\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n    <MagnifyingGlassIcon className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\n    {...props}\n  />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty\n    ref={ref}\n    className=\"py-6 text-center text-sm\"\n    {...props}\n  />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      \"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\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nCommandShortcut.displayName = \"CommandShortcut\"\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n"
+    },
+    {
+      "name": "command.stories.tsx",
+      "content": "import { useEffect, useState } from \"react\"\nimport { Meta, StoryObj } from \"@storybook/react\"\nimport { CommandSeparator } from \"cmdk\"\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandShortcut,\n} from \"@/registry/default/ui/command\"\n\nconst meta: Meta<typeof Command> = {\n  title: \"ui/Command\",\n  component: Command,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\n\nexport default meta\n\ntype Story = StoryObj<typeof Command>\n\nexport const Base: Story = {\n  args: {\n    className: \"rounded-lg border shadow-md\",\n  },\n  render: (args) => (\n    <Command {...args}>\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem>\n            <Calendar className=\"mr-2 h-4 w-4\" />\n            <span>Calendar</span>\n          </CommandItem>\n          <CommandItem>\n            <Smile className=\"mr-2 h-4 w-4\" />\n            <span>Search Emoji</span>\n          </CommandItem>\n          <CommandItem>\n            <Calculator className=\"mr-2 h-4 w-4\" />\n            <span>Calculator</span>\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem>\n            <User className=\"mr-2 h-4 w-4\" />\n            <span>Profile</span>\n            <CommandShortcut>⌘P</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <CreditCard className=\"mr-2 h-4 w-4\" />\n            <span>Billing</span>\n            <CommandShortcut>⌘B</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <Settings className=\"mr-2 h-4 w-4\" />\n            <span>Settings</span>\n            <CommandShortcut>⌘S</CommandShortcut>\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  ),\n}\n\nexport const Dialog: Story = {\n  args: {\n    className: \"rounded-lg border shadow-md\",\n  },\n  render: (args) => <CommandDialogDemo {...args} />,\n}\n\nconst CommandDialogDemo = (args: Story[\"args\"]) => {\n  const [open, setOpen] = useState(false)\n\n  useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault()\n        setOpen((open) => !open)\n      }\n    }\n\n    document.addEventListener(\"keydown\", down)\n    return () => document.removeEventListener(\"keydown\", down)\n  }, [])\n\n  return (\n    <>\n      <p className=\"text-sm text-muted-foreground\">\n        Press{\" \"}\n        <kbd className=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100\">\n          <span className=\"text-xs\">⌘</span>J\n        </kbd>\n      </p>\n      <CommandDialog {...args} open={open} onOpenChange={setOpen}>\n        <CommandInput placeholder=\"Type a command or search...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup heading=\"Suggestions\">\n            <CommandItem>\n              <Calendar className=\"mr-2 h-4 w-4\" />\n              <span>Calendar</span>\n            </CommandItem>\n            <CommandItem>\n              <Smile className=\"mr-2 h-4 w-4\" />\n              <span>Search Emoji</span>\n            </CommandItem>\n            <CommandItem>\n              <Calculator className=\"mr-2 h-4 w-4\" />\n              <span>Calculator</span>\n            </CommandItem>\n          </CommandGroup>\n          <CommandSeparator />\n          <CommandGroup heading=\"Settings\">\n            <CommandItem>\n              <User className=\"mr-2 h-4 w-4\" />\n              <span>Profile</span>\n              <CommandShortcut>⌘P</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <CreditCard className=\"mr-2 h-4 w-4\" />\n              <span>Billing</span>\n              <CommandShortcut>⌘B</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <Settings className=\"mr-2 h-4 w-4\" />\n              <span>Settings</span>\n              <CommandShortcut>⌘S</CommandShortcut>\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </CommandDialog>\n    </>\n  )\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/context-menu.json b/apps/www/public/registry/styles/new-york/context-menu.json
index a682b4d5a8d..2e3967fa7a9 100644
--- a/apps/www/public/registry/styles/new-york/context-menu.json
+++ b/apps/www/public/registry/styles/new-york/context-menu.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "context-menu.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"../default/ui/context-menu\"\n\nconst meta: Meta<typeof ContextMenu> = {\n  title: \"ui/ContextMenu\",\n  component: ContextMenu,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof ContextMenu>\n\nexport const Base: Story = {\n  render: (args) => (\n    <ContextMenu>\n      <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-slate-200 text-sm dark:border-slate-700\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-64\">\n        <ContextMenuItem inset>\n          Back\n          <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset disabled>\n          Forward\n          <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset>\n          Reload\n          <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuSub>\n          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n          <ContextMenuSubContent className=\"w-48\">\n            <ContextMenuItem>\n              Save Page As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n            <ContextMenuItem>Name Window...</ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>Developer Tools</ContextMenuItem>\n          </ContextMenuSubContent>\n        </ContextMenuSub>\n        <ContextMenuSeparator />\n        <ContextMenuCheckboxItem checked>\n          Show Bookmarks Bar\n          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n        </ContextMenuCheckboxItem>\n        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n        <ContextMenuSeparator />\n        <ContextMenuRadioGroup value=\"pedro\">\n          <ContextMenuLabel inset>People</ContextMenuLabel>\n          <ContextMenuSeparator />\n          <ContextMenuRadioItem value=\"pedro\">\n            Pedro Duarte\n          </ContextMenuRadioItem>\n          <ContextMenuRadioItem value=\"colm\">Colm Tuite</ContextMenuRadioItem>\n        </ContextMenuRadioGroup>\n      </ContextMenuContent>\n    </ContextMenu>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/default/ui/context-menu\"\n\nconst meta: Meta<typeof ContextMenu> = {\n  title: \"ui/ContextMenu\",\n  component: ContextMenu,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof ContextMenu>\n\nexport const Base: Story = {\n  render: (args) => (\n    <ContextMenu {...args}>\n      <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-slate-200 text-sm dark:border-slate-700\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-64\">\n        <ContextMenuItem inset>\n          Back\n          <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset disabled>\n          Forward\n          <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset>\n          Reload\n          <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuSub>\n          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n          <ContextMenuSubContent className=\"w-48\">\n            <ContextMenuItem>\n              Save Page As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n            <ContextMenuItem>Name Window...</ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>Developer Tools</ContextMenuItem>\n          </ContextMenuSubContent>\n        </ContextMenuSub>\n        <ContextMenuSeparator />\n        <ContextMenuCheckboxItem checked>\n          Show Bookmarks Bar\n          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n        </ContextMenuCheckboxItem>\n        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n        <ContextMenuSeparator />\n        <ContextMenuRadioGroup value=\"pedro\">\n          <ContextMenuLabel inset>People</ContextMenuLabel>\n          <ContextMenuSeparator />\n          <ContextMenuRadioItem value=\"pedro\">\n            Pedro Duarte\n          </ContextMenuRadioItem>\n          <ContextMenuRadioItem value=\"colm\">Colm Tuite</ContextMenuRadioItem>\n        </ContextMenuRadioGroup>\n      </ContextMenuContent>\n    </ContextMenu>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/dialog.json b/apps/www/public/registry/styles/new-york/dialog.json
index 0d0029abe0b..d1dd15128a3 100644
--- a/apps/www/public/registry/styles/new-york/dialog.json
+++ b/apps/www/public/registry/styles/new-york/dialog.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "dialog.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Button } from \"../default/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"../default/ui/dialog\"\nimport { Input } from \"../default/ui/input\"\nimport { Label } from \"../default/ui/label\"\n\nconst meta: Meta<typeof Dialog> = {\n  title: \"ui/Dialog\",\n  component: Dialog,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Dialog>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <DialogFooter>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nconst meta: Meta<typeof Dialog> = {\n  title: \"ui/Dialog\",\n  component: Dialog,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Dialog>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Dialog {...args}>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <DialogFooter>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/dropdown-menu.json b/apps/www/public/registry/styles/new-york/dropdown-menu.json
index 2e90f6a7610..550a6c6c7db 100644
--- a/apps/www/public/registry/styles/new-york/dropdown-menu.json
+++ b/apps/www/public/registry/styles/new-york/dropdown-menu.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "dropdown-menu.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport {\n  Cloud,\n  CreditCard,\n  Github,\n  Keyboard,\n  LifeBuoy,\n  LogOut,\n  Mail,\n  MessageSquare,\n  Plus,\n  PlusCircle,\n  Settings,\n  User,\n  UserPlus,\n  Users,\n} from \"lucide-react\"\n\nimport { Button } from \"../default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"../default/ui/dropdown-menu\"\n\nconst meta: Meta<typeof DropdownMenu> = {\n  title: \"ui/DropdownMenu\",\n  component: DropdownMenu,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof DropdownMenu>\n\nexport const Base: Story = {\n  render: (args) => (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <User className=\"mr-2 h-4 w-4\" />\n            <span>Profile</span>\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <CreditCard className=\"mr-2 h-4 w-4\" />\n            <span>Billing</span>\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Settings className=\"mr-2 h-4 w-4\" />\n            <span>Settings</span>\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Keyboard className=\"mr-2 h-4 w-4\" />\n            <span>Keyboard shortcuts</span>\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <Users className=\"mr-2 h-4 w-4\" />\n            <span>Team</span>\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <UserPlus className=\"mr-2 h-4 w-4\" />\n              <span>Invite users</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>\n                  <Mail className=\"mr-2 h-4 w-4\" />\n                  <span>Email</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <MessageSquare className=\"mr-2 h-4 w-4\" />\n                  <span>Message</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <PlusCircle className=\"mr-2 h-4 w-4\" />\n                  <span>More...</span>\n                </DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuItem>\n            <Plus className=\"mr-2 h-4 w-4\" />\n            <span>New Team</span>\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <Github className=\"mr-2 h-4 w-4\" />\n          <span>GitHub</span>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <LifeBuoy className=\"mr-2 h-4 w-4\" />\n          <span>Support</span>\n        </DropdownMenuItem>\n        <DropdownMenuItem disabled>\n          <Cloud className=\"mr-2 h-4 w-4\" />\n          <span>API</span>\n        </DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <LogOut className=\"mr-2 h-4 w-4\" />\n          <span>Log out</span>\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport {\n  Cloud,\n  CreditCard,\n  Github,\n  Keyboard,\n  LifeBuoy,\n  LogOut,\n  Mail,\n  MessageSquare,\n  Plus,\n  PlusCircle,\n  Settings,\n  User,\n  UserPlus,\n  Users,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nconst meta: Meta<typeof DropdownMenu> = {\n  title: \"ui/DropdownMenu\",\n  component: DropdownMenu,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof DropdownMenu>\n\nexport const Base: Story = {\n  render: (args) => (\n    <DropdownMenu {...args}>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <User className=\"mr-2 h-4 w-4\" />\n            <span>Profile</span>\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <CreditCard className=\"mr-2 h-4 w-4\" />\n            <span>Billing</span>\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Settings className=\"mr-2 h-4 w-4\" />\n            <span>Settings</span>\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Keyboard className=\"mr-2 h-4 w-4\" />\n            <span>Keyboard shortcuts</span>\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <Users className=\"mr-2 h-4 w-4\" />\n            <span>Team</span>\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <UserPlus className=\"mr-2 h-4 w-4\" />\n              <span>Invite users</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>\n                  <Mail className=\"mr-2 h-4 w-4\" />\n                  <span>Email</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <MessageSquare className=\"mr-2 h-4 w-4\" />\n                  <span>Message</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <PlusCircle className=\"mr-2 h-4 w-4\" />\n                  <span>More...</span>\n                </DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuItem>\n            <Plus className=\"mr-2 h-4 w-4\" />\n            <span>New Team</span>\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <Github className=\"mr-2 h-4 w-4\" />\n          <span>GitHub</span>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <LifeBuoy className=\"mr-2 h-4 w-4\" />\n          <span>Support</span>\n        </DropdownMenuItem>\n        <DropdownMenuItem disabled>\n          <Cloud className=\"mr-2 h-4 w-4\" />\n          <span>API</span>\n        </DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <LogOut className=\"mr-2 h-4 w-4\" />\n          <span>Log out</span>\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/form.json b/apps/www/public/registry/styles/new-york/form.json
index 212c282e861..597a320e761 100644
--- a/apps/www/public/registry/styles/new-york/form.json
+++ b/apps/www/public/registry/styles/new-york/form.json
@@ -15,6 +15,10 @@
     {
       "name": "form.tsx",
       "content": "import * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n  Controller,\n  ControllerProps,\n  FieldPath,\n  FieldValues,\n  FormProvider,\n  useFormContext,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState, formState } = useFormContext()\n\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nconst FormItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n    </FormItemContext.Provider>\n  )\n})\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      ref={ref}\n      className={cn(error && \"text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n  React.ElementRef<typeof Slot>,\n  React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn(\"text-[0.8rem] text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message) : children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      ref={ref}\n      id={formMessageId}\n      className={cn(\"text-[0.8rem] font-medium text-destructive\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n}\n"
+    },
+    {
+      "name": "form.stories.tsx",
+      "content": "import { zodResolver } from \"@hookform/resolvers/zod\"\nimport { action } from \"@storybook/addon-actions\"\nimport { Meta, StoryObj } from \"@storybook/react\"\nimport { useForm } from \"react-hook-form\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport { Input } from \"@/registry/default/ui/input\"\n\nconst meta: Meta<typeof Form> = {\n  title: \"ui/Form\",\n  component: Form,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Form>\n\nconst formSchema = z.object({\n  username: z.string().min(2, {\n    message: \"Username must be at least 2 characters.\",\n  }),\n})\n\nconst ProfileForm = (args: Story[\"args\"]) => {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      username: \"\",\n    },\n  })\n  function onSubmit(values: z.infer<typeof formSchema>) {\n    action(\"onSubmit\")(values)\n  }\n  return (\n    <Form {...args} {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"username\" {...field} />\n              </FormControl>\n              <FormDescription>\n                This is your public display name.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n\nexport const Base: Story = {\n  render: (args) => <ProfileForm {...args} />,\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/hover-card.json b/apps/www/public/registry/styles/new-york/hover-card.json
index e20ddf78e26..d02b6130b88 100644
--- a/apps/www/public/registry/styles/new-york/hover-card.json
+++ b/apps/www/public/registry/styles/new-york/hover-card.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "hover-card.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { CalendarDays } from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"../default/ui/avatar\"\nimport { Button } from \"../default/ui/button\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"../default/ui/hover-card\"\n\nconst meta: Meta<typeof HoverCard> = {\n  title: \"ui/HoverCard\",\n  component: HoverCard,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof HoverCard>\n\nexport const Base: Story = {\n  render: (args) => (\n    <HoverCard>\n      <HoverCardTrigger asChild>\n        <Button variant=\"link\">@nextjs</Button>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-80\">\n        <div className=\"flex justify-between space-x-4\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/vercel.png\" />\n            <AvatarFallback>VC</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n            <p className=\"text-sm\">\n              The React Framework – created and maintained by @vercel.\n            </p>\n            <div className=\"flex items-center pt-2\">\n              <CalendarDays className=\"mr-2 h-4 w-4 opacity-70\" />{\" \"}\n              <span className=\"text-xs text-slate-500 dark:text-slate-400\">\n                Joined December 2021\n              </span>\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { CalendarDays } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/default/ui/hover-card\"\n\nconst meta: Meta<typeof HoverCard> = {\n  title: \"ui/HoverCard\",\n  component: HoverCard,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof HoverCard>\n\nexport const Base: Story = {\n  render: (args) => (\n    <HoverCard {...args}>\n      <HoverCardTrigger asChild>\n        <Button variant=\"link\">@nextjs</Button>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-80\">\n        <div className=\"flex justify-between space-x-4\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/vercel.png\" />\n            <AvatarFallback>VC</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n            <p className=\"text-sm\">\n              The React Framework – created and maintained by @vercel.\n            </p>\n            <div className=\"flex items-center pt-2\">\n              <CalendarDays className=\"mr-2 h-4 w-4 opacity-70\" />{\" \"}\n              <span className=\"text-xs text-slate-500 dark:text-slate-400\">\n                Joined December 2021\n              </span>\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/input.json b/apps/www/public/registry/styles/new-york/input.json
index 937dea44fc1..0cde92fecc8 100644
--- a/apps/www/public/registry/styles/new-york/input.json
+++ b/apps/www/public/registry/styles/new-york/input.json
@@ -4,6 +4,10 @@
     {
       "name": "input.tsx",
       "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n"
+    },
+    {
+      "name": "input.stories.tsx",
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nconst meta: Meta<typeof Input> = {\n  title: \"ui/Input\",\n  component: Input,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Input>\n\nexport const Default: Story = {\n  render: (args) => <Input {...args} />,\n  args: {\n    type: \"email\",\n    placeholder: \"Email\",\n  },\n}\nexport const Disabled: Story = {\n  render: (args) => <Input {...args} />,\n  args: { ...Default.args, disabled: true },\n}\nexport const WithLabel: Story = {\n  render: (args) => (\n    <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n      <Label htmlFor=\"email\">{args.placeholder}</Label>\n      <Input {...args} id=\"email\" />\n    </div>\n  ),\n  args: { ...Default.args },\n}\nexport const WithText: Story = {\n  render: (args) => (\n    <div className=\"grid w-full max-w-sm items-center gap-1.5\">\n      <Label htmlFor=\"email-2\">{args.placeholder}</Label>\n      <Input {...args} id=\"email-2\" />\n      <p className=\"text-sm text-slate-500\">Enter your email address.</p>\n    </div>\n  ),\n  args: { ...Default.args },\n}\nexport const WithButton: Story = {\n  render: (args) => (\n    <div className=\"flex w-full max-w-sm items-center space-x-2\">\n      <Input {...args} />\n      <Button type=\"submit\">Subscribe</Button>\n    </div>\n  ),\n  args: { ...Default.args },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/label.json b/apps/www/public/registry/styles/new-york/label.json
index a0cd431bcce..a507f81753b 100644
--- a/apps/www/public/registry/styles/new-york/label.json
+++ b/apps/www/public/registry/styles/new-york/label.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "label.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Label } from \"../default/ui/label\"\n\nconst meta: Meta<typeof Label> = {\n  title: \"ui/Label\",\n  component: Label,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Label>\n\nexport const Base: Story = {\n  render: (args) => <Label htmlFor=\"email\">Your email address</Label>,\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\n\nconst meta: Meta<typeof Label> = {\n  title: \"ui/Label\",\n  component: Label,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Label>\n\nexport const Base: Story = {\n  render: (args) => <Label {...args} htmlFor=\"email\">Your email address</Label>,\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/menubar.json b/apps/www/public/registry/styles/new-york/menubar.json
index f19ee64f1e4..db928445732 100644
--- a/apps/www/public/registry/styles/new-york/menubar.json
+++ b/apps/www/public/registry/styles/new-york/menubar.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "menubar.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"../default/ui/menubar\"\n\nconst meta: Meta<typeof Menubar> = {\n  title: \"ui/Menubar\",\n  component: Menubar,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Menubar>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            New Window <MenubarShortcut>⌘N</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled>New Incognito Window</MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Share</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Email link</MenubarItem>\n              <MenubarItem>Messages</MenubarItem>\n              <MenubarItem>Notes</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>\n            Print... <MenubarShortcut>⌘P</MenubarShortcut>\n          </MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Edit</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Find</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Search the web</MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem>Find...</MenubarItem>\n              <MenubarItem>Find Next</MenubarItem>\n              <MenubarItem>Find Previous</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>Cut</MenubarItem>\n          <MenubarItem>Copy</MenubarItem>\n          <MenubarItem>Paste</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>View</MenubarTrigger>\n        <MenubarContent>\n          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n          <MenubarCheckboxItem checked>\n            Always Show Full URLs\n          </MenubarCheckboxItem>\n          <MenubarSeparator />\n          <MenubarItem inset>\n            Reload <MenubarShortcut>⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled inset>\n            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Hide Sidebar</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Profiles</MenubarTrigger>\n        <MenubarContent>\n          <MenubarRadioGroup value=\"benoit\">\n            <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n            <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n            <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n          </MenubarRadioGroup>\n          <MenubarSeparator />\n          <MenubarItem inset>Edit...</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Add Profile...</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/default/ui/menubar\"\n\nconst meta: Meta<typeof Menubar> = {\n  title: \"ui/Menubar\",\n  component: Menubar,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Menubar>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Menubar {...args}>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            New Window <MenubarShortcut>⌘N</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled>New Incognito Window</MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Share</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Email link</MenubarItem>\n              <MenubarItem>Messages</MenubarItem>\n              <MenubarItem>Notes</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>\n            Print... <MenubarShortcut>⌘P</MenubarShortcut>\n          </MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Edit</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Find</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Search the web</MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem>Find...</MenubarItem>\n              <MenubarItem>Find Next</MenubarItem>\n              <MenubarItem>Find Previous</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>Cut</MenubarItem>\n          <MenubarItem>Copy</MenubarItem>\n          <MenubarItem>Paste</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>View</MenubarTrigger>\n        <MenubarContent>\n          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n          <MenubarCheckboxItem checked>\n            Always Show Full URLs\n          </MenubarCheckboxItem>\n          <MenubarSeparator />\n          <MenubarItem inset>\n            Reload <MenubarShortcut>⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled inset>\n            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Hide Sidebar</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Profiles</MenubarTrigger>\n        <MenubarContent>\n          <MenubarRadioGroup value=\"benoit\">\n            <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n            <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n            <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n          </MenubarRadioGroup>\n          <MenubarSeparator />\n          <MenubarItem inset>Edit...</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Add Profile...</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/navigation-menu.json b/apps/www/public/registry/styles/new-york/navigation-menu.json
index 5fb09d18e41..bdc93e11721 100644
--- a/apps/www/public/registry/styles/new-york/navigation-menu.json
+++ b/apps/www/public/registry/styles/new-york/navigation-menu.json
@@ -7,6 +7,10 @@
     {
       "name": "navigation-menu.tsx",
       "content": "import * as React from \"react\"\nimport { ChevronDownIcon } from \"@radix-ui/react-icons\"\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst NavigationMenu = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative z-10 flex max-w-max flex-1 items-center justify-center\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <NavigationMenuViewport />\n  </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.List\n    ref={ref}\n    className={cn(\n      \"group flex flex-1 list-none items-center justify-center space-x-1\",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-9 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\"\n)\n\nconst NavigationMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Trigger\n    ref={ref}\n    className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n    {...props}\n  >\n    {children}{\" \"}\n    <ChevronDownIcon\n      className=\"relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuPrimitive.Trigger>\n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"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 \",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\nconst NavigationMenuViewport = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n  <div className={cn(\"absolute left-0 top-full flex justify-center\")}>\n    <NavigationMenuPrimitive.Viewport\n      className={cn(\n        \"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 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)]\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  </div>\n))\nNavigationMenuViewport.displayName =\n  NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Indicator\n    ref={ref}\n    className={cn(\n      \"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\",\n      className\n    )}\n    {...props}\n  >\n    <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuPrimitive.Indicator>\n))\nNavigationMenuIndicator.displayName =\n  NavigationMenuPrimitive.Indicator.displayName\n\nexport {\n  navigationMenuTriggerStyle,\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n}\n"
+    },
+    {
+      "name": "navigation-menu.stories.tsx",
+      "content": "import Link from \"next/link\"\nimport { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  navigationMenuTriggerStyle,\n} from \"@/registry/default/ui/navigation-menu\"\n\nconst meta: Meta<typeof NavigationMenu> = {\n  title: \"ui/NavigationMenu\",\n  component: NavigationMenu,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof NavigationMenu>\n\nexport const Base: Story = {\n  render: (args) => (\n    <NavigationMenu {...args}>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <Link href=\"/docs\" legacyBehavior passHref>\n            <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n              Documentation\n            </NavigationMenuLink>\n          </Link>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuLink\n            className={navigationMenuTriggerStyle()}\n            href=\"https:www.google.com\"\n          >\n            External\n          </NavigationMenuLink>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/popover.json b/apps/www/public/registry/styles/new-york/popover.json
index 8390f4bb625..e7f3c7467ca 100644
--- a/apps/www/public/registry/styles/new-york/popover.json
+++ b/apps/www/public/registry/styles/new-york/popover.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "popover.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { Settings2 } from \"lucide-react\"\n\nimport { Button } from \"../default/ui/button\"\nimport { Input } from \"../default/ui/input\"\nimport { Label } from \"../default/ui/label\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"../default/ui/popover\"\n\nconst meta: Meta<typeof Popover> = {\n  title: \"ui/Popover\",\n  component: Popover,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Popover>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\" className=\"w-10 rounded-full p-0\">\n          <Settings2 className=\"h-4 w-4\" />\n          <span className=\"sr-only\">Open popover</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"font-medium leading-none\">Dimensions</h4>\n            <p className=\"text-sm text-slate-500 dark:text-slate-400\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxWidth\">Max. width</Label>\n              <Input\n                id=\"maxWidth\"\n                defaultValue=\"300px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxHeight\">Max. height</Label>\n              <Input\n                id=\"maxHeight\"\n                defaultValue=\"none\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { Settings2 } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst meta: Meta<typeof Popover> = {\n  title: \"ui/Popover\",\n  component: Popover,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Popover>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Popover {...args}>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\" className=\"w-10 rounded-full p-0\">\n          <Settings2 className=\"h-4 w-4\" />\n          <span className=\"sr-only\">Open popover</span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"font-medium leading-none\">Dimensions</h4>\n            <p className=\"text-sm text-slate-500 dark:text-slate-400\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxWidth\">Max. width</Label>\n              <Input\n                id=\"maxWidth\"\n                defaultValue=\"300px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxHeight\">Max. height</Label>\n              <Input\n                id=\"maxHeight\"\n                defaultValue=\"none\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/progress.json b/apps/www/public/registry/styles/new-york/progress.json
index 687dd508254..3f9f10f3310 100644
--- a/apps/www/public/registry/styles/new-york/progress.json
+++ b/apps/www/public/registry/styles/new-york/progress.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "progress.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Progress } from \"../default/ui/progress\"\n\nconst meta: Meta<typeof Progress> = {\n  title: \"ui/Progress\",\n  component: Progress,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Progress>\n\nexport const Base: Story = {\n  render: (args) => <Progress value={33} />,\n  args: {},\n}\n"
+      "content": "import { useEffect, useState } from \"react\"\nimport { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Progress } from \"@/registry/default/ui/progress\"\n\nconst meta: Meta<typeof Progress> = {\n  title: \"ui/Progress\",\n  component: Progress,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Progress>\n\nexport const Base: Story = {\n  render: (args) => <Progress {...args} />,\n  args: {\n    value: 30,\n  },\n}\nexport const Animated: Story = {\n  render: (args) => <ProgressDemo {...args} />,\n  args: {\n    value: 13,\n  },\n}\n\nconst ProgressDemo = (args: Story[\"args\"]) => {\n  const [progress, setProgress] = useState(args?.value)\n\n  useEffect(() => {\n    const timer = setTimeout(() => setProgress(66), 500)\n    return () => clearTimeout(timer)\n  }, [])\n\n  return <Progress {...args} value={progress} className=\"w-[60%]\" />\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/radio-group.json b/apps/www/public/registry/styles/new-york/radio-group.json
index d77fb89ffe6..99fa11f7f47 100644
--- a/apps/www/public/registry/styles/new-york/radio-group.json
+++ b/apps/www/public/registry/styles/new-york/radio-group.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "radio-group.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Label } from \"../default/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"../default/ui/radio-group\"\n\nconst meta: Meta<typeof RadioGroup> = {\n  title: \"ui/RadioGroup\",\n  component: RadioGroup,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof RadioGroup>\n\nexport const Base: Story = {\n  render: (args) => (\n    <RadioGroup defaultValue=\"comfortable\">\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"default\" id=\"r1\" />\n        <Label htmlFor=\"r1\">Default</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n        <Label htmlFor=\"r2\">Comfortable</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"compact\" id=\"r3\" />\n        <Label htmlFor=\"r3\">Compact</Label>\n      </div>\n    </RadioGroup>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\"\n\nconst meta: Meta<typeof RadioGroup> = {\n  title: \"ui/RadioGroup\",\n  component: RadioGroup,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof RadioGroup>\n\nexport const Base: Story = {\n  render: (args) => (\n    <RadioGroup {...args}>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"default\" id=\"r1\" />\n        <Label htmlFor=\"r1\">Default</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n        <Label htmlFor=\"r2\">Comfortable</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"compact\" id=\"r3\" />\n        <Label htmlFor=\"r3\">Compact</Label>\n      </div>\n    </RadioGroup>\n  ),\n  args: {\n    defaultValue: \"comfortable\",\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/scroll-area.json b/apps/www/public/registry/styles/new-york/scroll-area.json
index 973c73ae814..f35f501746a 100644
--- a/apps/www/public/registry/styles/new-york/scroll-area.json
+++ b/apps/www/public/registry/styles/new-york/scroll-area.json
@@ -6,11 +6,11 @@
   "files": [
     {
       "name": "scroll-area.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <ScrollAreaPrimitive.Root\n    ref={ref}\n    className={cn(\"relative overflow-hidden\", className)}\n    {...props}\n  >\n    <ScrollAreaPrimitive.Viewport className=\"h-full w-full rounded-[inherit]\">\n      {children}\n    </ScrollAreaPrimitive.Viewport>\n    <ScrollBar />\n    <ScrollAreaPrimitive.Corner />\n  </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      \"flex touch-none select-none transition-colors\",\n      orientation === \"vertical\" &&\n        \"h-full w-2.5 border-l border-l-transparent p-[1px]\",\n      orientation === \"horizontal\" &&\n        \"h-2.5 border-t border-t-transparent p-[1px]\",\n      className\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.ScrollAreaThumb className=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <ScrollAreaPrimitive.Root\n    ref={ref}\n    className={cn(\"relative overflow-hidden\", className)}\n    {...props}\n  >\n    <ScrollAreaPrimitive.Viewport className=\"h-full w-full rounded-[inherit]\">\n      {children}\n    </ScrollAreaPrimitive.Viewport>\n    <ScrollBar />\n    <ScrollAreaPrimitive.Corner />\n  </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      \"flex touch-none select-none transition-colors\",\n      orientation === \"vertical\" &&\n        \"h-full w-2.5 border-l border-l-transparent p-[1px]\",\n      orientation === \"horizontal\" &&\n        \"h-2.5 border-t border-t-transparent p-[1px]\",\n      className\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.ScrollAreaThumb\n      className={cn(\n        \"relative rounded-full bg-border\",\n        orientation === \"vertical\" && \"flex-1\"\n      )}\n    />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n"
     },
     {
       "name": "scroll-area.stories.tsx",
-      "content": "import React from \"react\"\nimport { Meta, StoryObj } from \"@storybook/react\"\n\nimport { ScrollArea } from \"../default/ui/scroll-area\"\nimport { Separator } from \"../default/ui/separator\"\n\nconst meta: Meta<typeof ScrollArea> = {\n  title: \"ui/ScrollArea\",\n  component: ScrollArea,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof ScrollArea>\n\nexport const Base: Story = {\n  render: (args) => (\n    <ScrollArea className=\"h-72 w-48 rounded-md border border-slate-100 dark:border-slate-700\">\n      <div className=\"p-4\">\n        <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n        {Array.from({ length: 50 })\n          .map((_, i, a) => `v1.2.0-beta.${a.length - i}`)\n          .map((tag) => (\n            <React.Fragment>\n              <div className=\"text-sm\" key={tag}>\n                {tag}\n              </div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n      </div>\n    </ScrollArea>\n  ),\n  args: {},\n}\n"
+      "content": "import React from \"react\"\nimport { Meta, StoryObj } from \"@storybook/react\"\n\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\"\nimport { Separator } from \"@/registry/default/ui/separator\"\n\nconst meta: Meta<typeof ScrollArea> = {\n  title: \"ui/ScrollArea\",\n  component: ScrollArea,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof ScrollArea>\n\nexport const Base: Story = {\n  render: (args) => (\n    <ScrollArea {...args} className=\"h-72 w-48 rounded-md border border-slate-100 dark:border-slate-700\">\n      <div className=\"p-4\">\n        <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n        {Array.from({ length: 50 })\n          .map((_, i, a) => `v1.2.0-beta.${a.length - i}`)\n          .map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\" key={tag}>\n                {tag}\n              </div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n      </div>\n    </ScrollArea>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/select.json b/apps/www/public/registry/styles/new-york/select.json
index 68496bbea39..325f9cae4b0 100644
--- a/apps/www/public/registry/styles/new-york/select.json
+++ b/apps/www/public/registry/styles/new-york/select.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "select.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"../default/ui/select\"\n\nconst meta: Meta<typeof Select> = {\n  title: \"ui/Select\",\n  component: Select,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Select>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Select>\n      <SelectTrigger className=\"w-[180px]\">\n        <SelectValue placeholder=\"Select a fruit\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>Fruits</SelectLabel>\n          <SelectItem value=\"apple\">Apple</SelectItem>\n          <SelectItem value=\"banana\">Banana</SelectItem>\n          <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          <SelectItem value=\"grapes\">Grapes</SelectItem>\n          <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n        </SelectGroup>\n        <SelectSeparator />\n        <SelectGroup>\n          <SelectLabel>Vegetables</SelectLabel>\n          <SelectItem value=\"aubergine\">Aubergine</SelectItem>\n          <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n          <SelectItem value=\"carrot\" disabled>\n            Carrot\n          </SelectItem>\n          <SelectItem value=\"courgette\">Courgette</SelectItem>\n          <SelectItem value=\"leek\">Leek</SelectItem>\n        </SelectGroup>\n        <SelectSeparator />\n        <SelectGroup>\n          <SelectLabel>Meat</SelectLabel>\n          <SelectItem value=\"beef\">Beef</SelectItem>\n          <SelectItem value=\"chicken\">Chicken</SelectItem>\n          <SelectItem value=\"lamb\">Lamb</SelectItem>\n          <SelectItem value=\"pork\">Pork</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst meta: Meta<typeof Select> = {\n  title: \"ui/Select\",\n  component: Select,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Select>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Select {...args}>\n      <SelectTrigger className=\"w-[180px]\">\n        <SelectValue placeholder=\"Select a fruit\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>Fruits</SelectLabel>\n          <SelectItem value=\"apple\">Apple</SelectItem>\n          <SelectItem value=\"banana\">Banana</SelectItem>\n          <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          <SelectItem value=\"grapes\">Grapes</SelectItem>\n          <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n        </SelectGroup>\n        <SelectSeparator />\n        <SelectGroup>\n          <SelectLabel>Vegetables</SelectLabel>\n          <SelectItem value=\"aubergine\">Aubergine</SelectItem>\n          <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n          <SelectItem value=\"carrot\" disabled>\n            Carrot\n          </SelectItem>\n          <SelectItem value=\"courgette\">Courgette</SelectItem>\n          <SelectItem value=\"leek\">Leek</SelectItem>\n        </SelectGroup>\n        <SelectSeparator />\n        <SelectGroup>\n          <SelectLabel>Meat</SelectLabel>\n          <SelectItem value=\"beef\">Beef</SelectItem>\n          <SelectItem value=\"chicken\">Chicken</SelectItem>\n          <SelectItem value=\"lamb\">Lamb</SelectItem>\n          <SelectItem value=\"pork\">Pork</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/separator.json b/apps/www/public/registry/styles/new-york/separator.json
index 41e25ded933..46b3b7d5b21 100644
--- a/apps/www/public/registry/styles/new-york/separator.json
+++ b/apps/www/public/registry/styles/new-york/separator.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "separator.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Separator } from \"../default/ui/separator\"\n\nconst meta: Meta<typeof Separator> = {\n  title: \"ui/Separator\",\n  component: Separator,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Separator>\n\nexport const Base: Story = {\n  render: (args) => (\n    <div>\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm font-medium leading-none\">Radix Primitives</h4>\n        <p className=\"text-sm text-slate-500 dark:text-slate-400\">\n          An open-source UI component library.\n        </p>\n      </div>\n      <Separator className=\"my-4\" />\n      <div className=\"flex h-5 items-center space-x-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </div>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Separator } from \"@/registry/default/ui/separator\"\n\nconst meta: Meta<typeof Separator> = {\n  title: \"ui/Separator\",\n  component: Separator,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Separator>\n\nexport const Base: Story = {\n  render: (args) => (\n    <div>\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm font-medium leading-none\">Radix Primitives</h4>\n        <p className=\"text-sm text-slate-500 dark:text-slate-400\">\n          An open-source UI component library.\n        </p>\n      </div>\n      <Separator {...args} className=\"my-4\" />\n      <div className=\"flex h-5 items-center space-x-4 text-sm\">\n        <div>Blog</div>\n        <Separator {...args} orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator {...args} orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </div>\n  ),\n  args: {\n    orientation: \"horizontal\",\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/sheet.json b/apps/www/public/registry/styles/new-york/sheet.json
index 04fde8c542e..c4bf60c2ac8 100644
--- a/apps/www/public/registry/styles/new-york/sheet.json
+++ b/apps/www/public/registry/styles/new-york/sheet.json
@@ -7,6 +7,10 @@
     {
       "name": "sheet.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = ({\n  className,\n  ...props\n}: SheetPrimitive.DialogPortalProps) => (\n  <SheetPrimitive.Portal className={cn(className)} {...props} />\n)\nSheetPortal.displayName = SheetPrimitive.Portal.displayName\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay\n    className={cn(\n      \"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n  \"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\",\n  {\n    variants: {\n      side: {\n        top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n        bottom:\n          \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n        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\",\n        right:\n          \"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\",\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  }\n)\n\ninterface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n  <SheetPortal>\n    <SheetOverlay />\n    <SheetPrimitive.Content\n      ref={ref}\n      className={cn(sheetVariants({ side }), className)}\n      {...props}\n    >\n      {children}\n      <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\">\n        <Cross2Icon className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </SheetPrimitive.Close>\n    </SheetPrimitive.Content>\n  </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold text-foreground\", className)}\n    {...props}\n  />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n"
+    },
+    {
+      "name": "sheet.stories.tsx",
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/default/ui/sheet\"\n\nconst meta: Meta<typeof Sheet> = {\n  title: \"ui/Sheet\",\n  component: Sheet,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Sheet>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Sheet {...args}>\n      <SheetTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </SheetTrigger>\n      <SheetContent>\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when youre done.\n          </SheetDescription>\n        </SheetHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose asChild>\n            <Button type=\"submit\">Save changes</Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/skeleton.json b/apps/www/public/registry/styles/new-york/skeleton.json
index 1dfd060a95e..3809eda2455 100644
--- a/apps/www/public/registry/styles/new-york/skeleton.json
+++ b/apps/www/public/registry/styles/new-york/skeleton.json
@@ -4,6 +4,10 @@
     {
       "name": "skeleton.tsx",
       "content": "import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\"animate-pulse rounded-md bg-primary/10\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n"
+    },
+    {
+      "name": "skeleton.stories.tsx",
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst meta: Meta<typeof Skeleton> = {\n  title: \"ui/Skeleton\",\n  component: Skeleton,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Skeleton>\n\nexport const Base: Story = {\n  render: (args) => (\n    <div className=\"flex items-center space-x-4\">\n      <Skeleton {...args} className=\"h-12 w-12 rounded-full\" />\n      <div className=\"space-y-2\">\n        <Skeleton {...args} className=\"h-4 w-[250px]\" />\n        <Skeleton {...args} className=\"h-4 w-[200px]\" />\n      </div>\n    </div>\n  ),\n  args: {},\n}"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/slider.json b/apps/www/public/registry/styles/new-york/slider.json
index b6b23971683..3e9ea0b6db3 100644
--- a/apps/www/public/registry/styles/new-york/slider.json
+++ b/apps/www/public/registry/styles/new-york/slider.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "slider.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Slider } from \"../default/ui/slider\"\n\nconst meta: Meta<typeof Slider> = {\n  title: \"ui/Slider\",\n  component: Slider,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Slider>\n\nexport const Base: Story = {\n  args: {\n    defaultValue: [33],\n    max: 100,\n    step: 1,\n  },\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Slider } from \"@/registry/default/ui/slider\"\n\nconst meta: Meta<typeof Slider> = {\n  title: \"ui/Slider\",\n  component: Slider,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Slider>\n\nexport const Base: Story = {\n  args: {\n    defaultValue: [33],\n    max: 100,\n    step: 1,\n  },\n}\n\nexport const Interval: Story = {\n  args: {\n    defaultValue: [33, 88],\n    max: 100,\n    step: 1,\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/switch.json b/apps/www/public/registry/styles/new-york/switch.json
index cb58a4e1456..d4af02fa606 100644
--- a/apps/www/public/registry/styles/new-york/switch.json
+++ b/apps/www/public/registry/styles/new-york/switch.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "switch.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Label } from \"../default/ui/label\"\nimport { Switch } from \"../default/ui/switch\"\n\nconst meta: Meta<typeof Switch> = {\n  title: \"ui/Switch\",\n  component: Switch,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Switch>\n\nexport const Base: Story = {\n  render: (args) => (\n    <div className=\"flex items-center space-x-2\">\n      <Switch id=\"airplane-mode\" />\n      <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n    </div>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nconst meta: Meta<typeof Switch> = {\n  title: \"ui/Switch\",\n  component: Switch,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Switch>\n\nexport const Base: Story = {\n  render: (args) => (\n    <div className=\"flex items-center space-x-2\">\n      <Switch {...args} id=\"airplane-mode\" />\n      <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n    </div>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/table.json b/apps/www/public/registry/styles/new-york/table.json
index 66e3077ef6e..172f1b7465b 100644
--- a/apps/www/public/registry/styles/new-york/table.json
+++ b/apps/www/public/registry/styles/new-york/table.json
@@ -3,7 +3,11 @@
   "files": [
     {
       "name": "table.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\"w-full caption-bottom text-sm\", className)}\n      {...props}\n    />\n  </div>\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(\"[&_tr]:border-b\", className)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\"[&_tr:last-child]:border-0\", className)}\n    {...props}\n  />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\"bg-primary font-medium text-primary-foreground\", className)}\n    {...props}\n  />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={cn(\n      \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n      className\n    )}\n    {...props}\n  />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      \"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      className\n    )}\n    {...props}\n  />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      \"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      className\n    )}\n    {...props}\n  />\n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n"
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\"w-full caption-bottom text-sm\", className)}\n      {...props}\n    />\n  </div>\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(\"[&_tr]:border-b\", className)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\"[&_tr:last-child]:border-0\", className)}\n    {...props}\n  />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\"bg-primary font-medium text-primary-foreground\", className)}\n    {...props}\n  />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={cn(\n      \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n      className\n    )}\n    {...props}\n  />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      \"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      className\n    )}\n    {...props}\n  />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      \"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      className\n    )}\n    {...props}\n  />\n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n"
+    },
+    {
+      "name": "table.stories.tsx",
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\n\nconst meta: Meta<typeof Table> = {\n  title: \"ui/Table\",\n  component: Table,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Table>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Table {...args}>\n      <TableCaption>A list of your recent invoices.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[100px]\">Invoice</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead>Method</TableHead>\n          <TableHead className=\"text-right\">Amount</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invoices.map((invoice) => (\n          <TableRow key={invoice.invoice}>\n            <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n            <TableCell>{invoice.paymentStatus}</TableCell>\n            <TableCell>{invoice.paymentMethod}</TableCell>\n            <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  ),\n  args: {},\n}\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/tabs.json b/apps/www/public/registry/styles/new-york/tabs.json
index 1fa120cd327..11ab19d0523 100644
--- a/apps/www/public/registry/styles/new-york/tabs.json
+++ b/apps/www/public/registry/styles/new-york/tabs.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "tabs.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Button } from \"../default/ui/button\"\nimport { Input } from \"../default/ui/input\"\nimport { Label } from \"../default/ui/label\"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"../default/ui/tabs\"\n\nconst meta: Meta<typeof Tabs> = {\n  title: \"ui/Tabs\",\n  component: Tabs,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Tabs>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Tabs {...args} className=\"w-[400px]\">\n      <TabsList>\n        <TabsTrigger value=\"account\">Account</TabsTrigger>\n        <TabsTrigger value=\"password\">Password</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"account\">\n        <p className=\"text-sm text-slate-500 dark:text-slate-400\">\n          Make changes to your account here. Click save when you're done.\n        </p>\n        <div className=\"grid gap-2 py-4\">\n          <div className=\"space-y-1\">\n            <Label htmlFor=\"name\">Name</Label>\n            <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n          </div>\n          <div className=\"space-y-1\">\n            <Label htmlFor=\"username\">Username</Label>\n            <Input id=\"username\" defaultValue=\"@peduarte\" />\n          </div>\n        </div>\n        <div className=\"flex\">\n          <Button>Save changes</Button>\n        </div>\n      </TabsContent>\n      <TabsContent value=\"password\">\n        <p className=\"text-sm text-slate-500 dark:text-slate-400\">\n          Change your password here. After saving, you'll be logged out.\n        </p>\n        <div className=\"grid gap-2 py-4\">\n          <div className=\"space-y-1\">\n            <Label htmlFor=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div className=\"space-y-1\">\n            <Label htmlFor=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </div>\n        <div className=\"flex\">\n          <Button>Save password</Button>\n        </div>\n      </TabsContent>\n    </Tabs>\n  ),\n  args: {\n    defaultValue: \"account\",\n  },\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\"\n\nconst meta: Meta<typeof Tabs> = {\n  title: \"ui/Tabs\",\n  component: Tabs,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Tabs>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Tabs {...args} className=\"w-[400px]\">\n      <TabsList>\n        <TabsTrigger value=\"account\">Account</TabsTrigger>\n        <TabsTrigger value=\"password\">Password</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"account\">\n        <p className=\"text-sm text-slate-500 dark:text-slate-400\">\n          Make changes to your account here. Click save when you're done.\n        </p>\n        <div className=\"grid gap-2 py-4\">\n          <div className=\"space-y-1\">\n            <Label htmlFor=\"name\">Name</Label>\n            <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n          </div>\n          <div className=\"space-y-1\">\n            <Label htmlFor=\"username\">Username</Label>\n            <Input id=\"username\" defaultValue=\"@peduarte\" />\n          </div>\n        </div>\n        <div className=\"flex\">\n          <Button>Save changes</Button>\n        </div>\n      </TabsContent>\n      <TabsContent value=\"password\">\n        <p className=\"text-sm text-slate-500 dark:text-slate-400\">\n          Change your password here. After saving, you'll be logged out.\n        </p>\n        <div className=\"grid gap-2 py-4\">\n          <div className=\"space-y-1\">\n            <Label htmlFor=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div className=\"space-y-1\">\n            <Label htmlFor=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </div>\n        <div className=\"flex\">\n          <Button>Save password</Button>\n        </div>\n      </TabsContent>\n    </Tabs>\n  ),\n  args: {\n    defaultValue: \"account\",\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/textarea.json b/apps/www/public/registry/styles/new-york/textarea.json
index 36c6bcac24f..19b8553ce17 100644
--- a/apps/www/public/registry/styles/new-york/textarea.json
+++ b/apps/www/public/registry/styles/new-york/textarea.json
@@ -7,7 +7,7 @@
     },
     {
       "name": "textarea.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Button } from \"../default/ui/button\"\nimport { Label } from \"../default/ui/label\"\nimport { Textarea } from \"../default/ui/textarea\"\n\nconst meta: Meta<typeof Textarea> = {\n  title: \"ui/Textarea\",\n  component: Textarea,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Textarea>\n\nexport const Default: Story = {\n  render: (args) => <Textarea {...args} />,\n  args: {\n    placeholder: \"Type your message here.\",\n  },\n}\n\nexport const Disabled: Story = {\n  render: (args) => <Textarea {...args} />,\n  args: {\n    ...Default.args,\n    disabled: true,\n  },\n}\n\nexport const WithLabel: Story = {\n  render: (args) => (\n    <div className=\"grid w-full gap-1.5\">\n      <Label htmlFor=\"message\">Your message</Label>\n      <Textarea {...args} id=\"message\" />\n    </div>\n  ),\n  args: { ...Default.args },\n}\n\nexport const WithText: Story = {\n  render: (args) => (\n    <div className=\"grid w-full gap-1.5\">\n      <Label htmlFor=\"message-2\">Your Message</Label>\n      <Textarea {...args} id=\"message-2\" />\n      <p className=\"text-sm text-slate-500\">\n        Your message will be copied to the support team.\n      </p>\n    </div>\n  ),\n  args: { ...Default.args },\n}\n\nexport const WithButton: Story = {\n  render: (args) => (\n    <div className=\"grid w-full gap-2\">\n      <Textarea {...args} />\n      <Button>Send message</Button>\n    </div>\n  ),\n  args: { ...Default.args },\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\n\nconst meta: Meta<typeof Textarea> = {\n  title: \"ui/Textarea\",\n  component: Textarea,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Textarea>\n\nexport const Default: Story = {\n  render: (args) => <Textarea {...args} />,\n  args: {\n    placeholder: \"Type your message here.\",\n  },\n}\n\nexport const Disabled: Story = {\n  render: (args) => <Textarea {...args} />,\n  args: {\n    ...Default.args,\n    disabled: true,\n  },\n}\n\nexport const WithLabel: Story = {\n  render: (args) => (\n    <div className=\"grid w-full gap-1.5\">\n      <Label htmlFor=\"message\">Your message</Label>\n      <Textarea {...args} id=\"message\" />\n    </div>\n  ),\n  args: { ...Default.args },\n}\n\nexport const WithText: Story = {\n  render: (args) => (\n    <div className=\"grid w-full gap-1.5\">\n      <Label htmlFor=\"message-2\">Your Message</Label>\n      <Textarea {...args} id=\"message-2\" />\n      <p className=\"text-sm text-slate-500\">\n        Your message will be copied to the support team.\n      </p>\n    </div>\n  ),\n  args: { ...Default.args },\n}\n\nexport const WithButton: Story = {\n  render: (args) => (\n    <div className=\"grid w-full gap-2\">\n      <Textarea {...args} />\n      <Button>Send message</Button>\n    </div>\n  ),\n  args: { ...Default.args },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/toggle.json b/apps/www/public/registry/styles/new-york/toggle.json
index c51417ad689..5517819f611 100644
--- a/apps/www/public/registry/styles/new-york/toggle.json
+++ b/apps/www/public/registry/styles/new-york/toggle.json
@@ -7,6 +7,10 @@
     {
       "name": "toggle.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-9 px-3\",\n        sm: \"h-8 px-2\",\n        lg: \"h-10 px-3\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst Toggle = React.forwardRef<\n  React.ElementRef<typeof TogglePrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive.Root\n    ref={ref}\n    className={cn(toggleVariants({ variant, size, className }))}\n    {...props}\n  />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n"
+    },
+    {
+      "name": "toggle.stories.tsx",
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { Bold, Italic, Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nconst meta: Meta<typeof Toggle> = {\n  title: \"ui/Toggle\",\n  component: Toggle,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Toggle>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Toggle {...args} aria-label=\"Toggle italic\">\n      <Bold className=\"h-4 w-4\" />\n    </Toggle>\n  ),\n  args: {},\n}\n\nexport const Outline: Story = {\n  render: (args) => (\n    <Toggle {...args} aria-label=\"Toggle italic\">\n      <Italic className=\"h-4 w-4\" />\n    </Toggle>\n  ),\n  args: {\n    variant: \"outline\",\n  },\n}\n\nexport const WithText: Story = {\n  render: (args) => (\n    <Toggle {...args} aria-label=\"Toggle italic\">\n      <Italic className=\"mr-2 h-4 w-4\" />\n      Italic\n    </Toggle>\n  ),\n  args: {},\n}\n\nexport const Small: Story = {\n  render: (args) => (\n    <Toggle {...args} aria-label=\"Toggle italic\">\n      <Italic className=\"h-4 w-4\" />\n    </Toggle>\n  ),\n  args: {\n    size: \"sm\",\n  },\n}\n\nexport const Large: Story = {\n  render: (args) => (\n    <Toggle {...args} aria-label=\"Toggle italic\">\n      <Italic className=\"h-4 w-4\" />\n    </Toggle>\n  ),\n  args: {\n    size: \"lg\",\n  },\n}\n\nexport const Disabled: Story = {\n  render: (args) => (\n    <Toggle {...args} aria-label=\"Toggle italic\">\n      <Underline className=\"h-4 w-4\" />\n    </Toggle>\n  ),\n  args: {\n    disabled: true,\n  },\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/styles/new-york/tooltip.json b/apps/www/public/registry/styles/new-york/tooltip.json
index 7fd9019c37e..bca32cb6918 100644
--- a/apps/www/public/registry/styles/new-york/tooltip.json
+++ b/apps/www/public/registry/styles/new-york/tooltip.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "tooltip.stories.tsx",
-      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Button } from \"../default/ui/button\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../default/ui/tooltip\"\n\nconst meta: Meta<typeof Tooltip> = {\n  title: \"ui/Tooltip\",\n  component: Tooltip,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Tooltip>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <Button variant=\"outline\" className=\"w-10 rounded-full p-0\">\n          <Plus className=\"h-4 w-4\" />\n          <span className=\"sr-only\">Add</span>\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  ),\n  args: {},\n}\n"
+      "content": "import { Meta, StoryObj } from \"@storybook/react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nconst meta: Meta<typeof Tooltip> = {\n  title: \"ui/Tooltip\",\n  component: Tooltip,\n  tags: [\"autodocs\"],\n  argTypes: {},\n}\nexport default meta\n\ntype Story = StoryObj<typeof Tooltip>\n\nexport const Base: Story = {\n  render: (args) => (\n    <Tooltip {...args}>\n      <TooltipTrigger asChild>\n        <Button variant=\"outline\" className=\"w-10 rounded-full p-0\">\n          <Plus className=\"h-4 w-4\" />\n          <span className=\"sr-only\">Add</span>\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  ),\n  args: {},\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/public/registry/themes/slate.json b/apps/www/public/registry/themes/slate.json
index 2cd8397f282..7c72a9d6db3 100644
--- a/apps/www/public/registry/themes/slate.json
+++ b/apps/www/public/registry/themes/slate.json
@@ -42,7 +42,7 @@
       "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%"
+      "ring": "212.7 26.8% 83.9%"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/apps/www/registry/stories/calender.stories.tsx b/apps/www/registry/stories/calendar.stories.tsx
similarity index 100%
rename from apps/www/registry/stories/calender.stories.tsx
rename to apps/www/registry/stories/calendar.stories.tsx