diff --git a/.changeset/tame-brooms-fold.md b/.changeset/tame-brooms-fold.md
new file mode 100644
index 000000000..51f20d9bf
--- /dev/null
+++ b/.changeset/tame-brooms-fold.md
@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+use tw-merge to transform-style
diff --git a/apps/v4/examples/base/ui-rtl/sidebar.tsx b/apps/v4/examples/base/ui-rtl/sidebar.tsx
index bc5a29c2b..6d7f7b6f4 100644
--- a/apps/v4/examples/base/ui-rtl/sidebar.tsx
+++ b/apps/v4/examples/base/ui-rtl/sidebar.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { useIsMobile } from "@/examples/base/hooks/use-mobile"
 import { cn } from "@/examples/base/lib/utils"
 import { Button } from "@/examples/base/ui-rtl/button"
 import { Input } from "@/examples/base/ui-rtl/input"
@@ -22,7 +23,6 @@ import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
 import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
diff --git a/apps/v4/examples/base/ui/sidebar.tsx b/apps/v4/examples/base/ui/sidebar.tsx
index ac4b8d709..6eec9b1e8 100644
--- a/apps/v4/examples/base/ui/sidebar.tsx
+++ b/apps/v4/examples/base/ui/sidebar.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { useIsMobile } from "@/examples/base/hooks/use-mobile"
 import { cn } from "@/examples/base/lib/utils"
 import { Button } from "@/examples/base/ui/button"
 import { Input } from "@/examples/base/ui/input"
@@ -22,7 +23,6 @@ import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
 import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
diff --git a/apps/v4/examples/radix/ui-rtl/sidebar.tsx b/apps/v4/examples/radix/ui-rtl/sidebar.tsx
index 160453915..c53149c8e 100644
--- a/apps/v4/examples/radix/ui-rtl/sidebar.tsx
+++ b/apps/v4/examples/radix/ui-rtl/sidebar.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { useIsMobile } from "@/examples/radix/hooks/use-mobile"
 import { cn } from "@/examples/radix/lib/utils"
 import { Button } from "@/examples/radix/ui-rtl/button"
 import { Input } from "@/examples/radix/ui-rtl/input"
@@ -21,7 +22,6 @@ import {
 import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
 
-import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
 import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
diff --git a/apps/v4/examples/radix/ui/sidebar.tsx b/apps/v4/examples/radix/ui/sidebar.tsx
index 05674d5f3..6c74aaed1 100644
--- a/apps/v4/examples/radix/ui/sidebar.tsx
+++ b/apps/v4/examples/radix/ui/sidebar.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { useIsMobile } from "@/examples/radix/hooks/use-mobile"
 import { cn } from "@/examples/radix/lib/utils"
 import { Button } from "@/examples/radix/ui/button"
 import { Input } from "@/examples/radix/ui/input"
@@ -21,7 +22,6 @@ import {
 import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
 
-import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
 import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
diff --git a/apps/v4/package.json b/apps/v4/package.json
index d818dbc02..49fb6d881 100644
--- a/apps/v4/package.json
+++ b/apps/v4/package.json
@@ -19,6 +19,7 @@
     "examples:build": "bun run ./scripts/build-examples.ts && prettier --log-level silent --write \"examples/**/*.{ts,tsx}\" --cache",
     "registry:capture": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/capture-registry.mts",
     "validate:registries": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/validate-registries.mts",
+    "test:apps": "bun run ./scripts/build-test-app.mts",
     "postinstall": "fumadocs-mdx"
   },
   "dependencies": {
diff --git a/apps/v4/public/r/styles/base-lyra/command-example.json b/apps/v4/public/r/styles/base-lyra/command-example.json
index 69137f688..39cb6bb29 100644
--- a/apps/v4/public/r/styles/base-lyra/command-example.json
+++ b/apps/v4/public/r/styles/base-lyra/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/base-lyra/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/base-lyra/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"w-full p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/input-example.json b/apps/v4/public/r/styles/base-lyra/input-example.json
index ecf33cbbb..b309e112a 100644
--- a/apps/v4/public/r/styles/base-lyra/input-example.json
+++ b/apps/v4/public/r/styles/base-lyra/input-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/input-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-lyra/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\n\nexport default function InputExample() {\n  return (\n    <ExampleWrapper>\n      <InputBasic />\n      <InputInvalid />\n      <InputWithLabel />\n      <InputWithDescription />\n      <InputDisabled />\n      <InputTypes />\n      <InputWithSelect />\n      <InputWithButton />\n      <InputWithNativeSelect />\n      <InputForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Example>\n  )\n}\n\nfunction InputInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction InputWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-email\"\n          type=\"email\"\n          placeholder=\"name@example.com\"\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n        <Input\n          id=\"input-demo-username\"\n          type=\"text\"\n          placeholder=\"Enter your username\"\n        />\n        <FieldDescription>\n          Choose a unique username for your account.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-disabled\"\n          type=\"email\"\n          placeholder=\"Email\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputTypes() {\n  return (\n    <Example title=\"Input Types\">\n      <div className=\"flex w-full flex-col gap-6\">\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n          <Input\n            id=\"input-demo-password\"\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n          <Input\n            id=\"input-demo-tel\"\n            type=\"tel\"\n            placeholder=\"+1 (555) 123-4567\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n          <Input\n            id=\"input-demo-url\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n          <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n          <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n          <Input id=\"input-demo-date\" type=\"date\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n          <Input id=\"input-demo-time\" type=\"time\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n          <Input id=\"input-demo-file\" type=\"file\" />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n        <Select defaultValue=\"usd\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"usd\">USD</SelectItem>\n            <SelectItem value=\"eur\">EUR</SelectItem>\n            <SelectItem value=\"gbp\">GBP</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Button>Search</Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithNativeSelect() {\n  return (\n    <Example title=\"With Native Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n        <NativeSelect defaultValue=\"+1\">\n          <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n          <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n          <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputForm() {\n  return (\n    <Example title=\"Form\">\n      <form className=\"w-full\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n            <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n            <Input\n              id=\"form-email\"\n              type=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <FieldDescription>\n              We&apos;ll never share your email with anyone.\n            </FieldDescription>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n              <Input\n                id=\"form-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n              <Select defaultValue=\"us\">\n                <SelectTrigger id=\"form-country\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"us\">United States</SelectItem>\n                  <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                  <SelectItem value=\"ca\">Canada</SelectItem>\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n            <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-lyra/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\n\nexport default function InputExample() {\n  return (\n    <ExampleWrapper>\n      <InputBasic />\n      <InputInvalid />\n      <InputWithLabel />\n      <InputWithDescription />\n      <InputDisabled />\n      <InputTypes />\n      <InputWithSelect />\n      <InputWithButton />\n      <InputWithNativeSelect />\n      <InputForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Example>\n  )\n}\n\nfunction InputInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction InputWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-email\"\n          type=\"email\"\n          placeholder=\"name@example.com\"\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n        <Input\n          id=\"input-demo-username\"\n          type=\"text\"\n          placeholder=\"Enter your username\"\n        />\n        <FieldDescription>\n          Choose a unique username for your account.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-disabled\"\n          type=\"email\"\n          placeholder=\"Email\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputTypes() {\n  return (\n    <Example title=\"Input Types\">\n      <div className=\"flex w-full flex-col gap-6\">\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n          <Input\n            id=\"input-demo-password\"\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n          <Input\n            id=\"input-demo-tel\"\n            type=\"tel\"\n            placeholder=\"+1 (555) 123-4567\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n          <Input\n            id=\"input-demo-url\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n          <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n          <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n          <Input id=\"input-demo-date\" type=\"date\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n          <Input id=\"input-demo-time\" type=\"time\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n          <Input id=\"input-demo-file\" type=\"file\" />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n        <Select defaultValue=\"usd\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"usd\">USD</SelectItem>\n              <SelectItem value=\"eur\">EUR</SelectItem>\n              <SelectItem value=\"gbp\">GBP</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Button>Search</Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithNativeSelect() {\n  return (\n    <Example title=\"With Native Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n        <NativeSelect defaultValue=\"+1\">\n          <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n          <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n          <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputForm() {\n  return (\n    <Example title=\"Form\">\n      <form className=\"w-full\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n            <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n            <Input\n              id=\"form-email\"\n              type=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <FieldDescription>\n              We&apos;ll never share your email with anyone.\n            </FieldDescription>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n              <Input\n                id=\"form-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n              <Select defaultValue=\"us\">\n                <SelectTrigger id=\"form-country\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"us\">United States</SelectItem>\n                    <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                    <SelectItem value=\"ca\">Canada</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n            <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar.json b/apps/v4/public/r/styles/base-lyra/sidebar.json
index 410c112a3..f96f53352 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-lyra/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-lyra/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-none px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-none p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-xs w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-0 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-none p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-none p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-none px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-none px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-none\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { useIsMobile } from \"@/registry/base-lyra/hooks/use-mobile\"\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-lyra/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-lyra/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-none px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-none p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-xs w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-0 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-none p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-none p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-none px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-none px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-none\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/command-example.json b/apps/v4/public/r/styles/base-maia/command-example.json
index cb820ee57..022eca0d4 100644
--- a/apps/v4/public/r/styles/base-maia/command-example.json
+++ b/apps/v4/public/r/styles/base-maia/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-maia/ui/card\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/base-maia/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-maia/ui/card\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/base-maia/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"w-full p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/drawer.json b/apps/v4/public/r/styles/base-maia/drawer.json
index eb22c5295..2a6825bdd 100644
--- a/apps/v4/public/r/styles/base-maia/drawer.json
+++ b/apps/v4/public/r/styles/base-maia/drawer.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"before:bg-background flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mt-4 h-1.5 w-[100px] rounded-full mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\"gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"before:bg-background before:border-border flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mt-4 h-1.5 w-[100px] rounded-full mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\"gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/input-example.json b/apps/v4/public/r/styles/base-maia/input-example.json
index 73e71ce7b..cb262173f 100644
--- a/apps/v4/public/r/styles/base-maia/input-example.json
+++ b/apps/v4/public/r/styles/base-maia/input-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/input-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-maia/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-maia/ui/select\"\n\nexport default function InputExample() {\n  return (\n    <ExampleWrapper>\n      <InputBasic />\n      <InputInvalid />\n      <InputWithLabel />\n      <InputWithDescription />\n      <InputDisabled />\n      <InputTypes />\n      <InputWithSelect />\n      <InputWithButton />\n      <InputWithNativeSelect />\n      <InputForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Example>\n  )\n}\n\nfunction InputInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction InputWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-email\"\n          type=\"email\"\n          placeholder=\"name@example.com\"\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n        <Input\n          id=\"input-demo-username\"\n          type=\"text\"\n          placeholder=\"Enter your username\"\n        />\n        <FieldDescription>\n          Choose a unique username for your account.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-disabled\"\n          type=\"email\"\n          placeholder=\"Email\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputTypes() {\n  return (\n    <Example title=\"Input Types\">\n      <div className=\"flex w-full flex-col gap-6\">\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n          <Input\n            id=\"input-demo-password\"\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n          <Input\n            id=\"input-demo-tel\"\n            type=\"tel\"\n            placeholder=\"+1 (555) 123-4567\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n          <Input\n            id=\"input-demo-url\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n          <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n          <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n          <Input id=\"input-demo-date\" type=\"date\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n          <Input id=\"input-demo-time\" type=\"time\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n          <Input id=\"input-demo-file\" type=\"file\" />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n        <Select defaultValue=\"usd\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"usd\">USD</SelectItem>\n            <SelectItem value=\"eur\">EUR</SelectItem>\n            <SelectItem value=\"gbp\">GBP</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Button>Search</Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithNativeSelect() {\n  return (\n    <Example title=\"With Native Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n        <NativeSelect defaultValue=\"+1\">\n          <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n          <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n          <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputForm() {\n  return (\n    <Example title=\"Form\">\n      <form className=\"w-full\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n            <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n            <Input\n              id=\"form-email\"\n              type=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <FieldDescription>\n              We&apos;ll never share your email with anyone.\n            </FieldDescription>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n              <Input\n                id=\"form-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n              <Select defaultValue=\"us\">\n                <SelectTrigger id=\"form-country\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"us\">United States</SelectItem>\n                  <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                  <SelectItem value=\"ca\">Canada</SelectItem>\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n            <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-maia/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-maia/ui/select\"\n\nexport default function InputExample() {\n  return (\n    <ExampleWrapper>\n      <InputBasic />\n      <InputInvalid />\n      <InputWithLabel />\n      <InputWithDescription />\n      <InputDisabled />\n      <InputTypes />\n      <InputWithSelect />\n      <InputWithButton />\n      <InputWithNativeSelect />\n      <InputForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Example>\n  )\n}\n\nfunction InputInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction InputWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-email\"\n          type=\"email\"\n          placeholder=\"name@example.com\"\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n        <Input\n          id=\"input-demo-username\"\n          type=\"text\"\n          placeholder=\"Enter your username\"\n        />\n        <FieldDescription>\n          Choose a unique username for your account.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-disabled\"\n          type=\"email\"\n          placeholder=\"Email\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputTypes() {\n  return (\n    <Example title=\"Input Types\">\n      <div className=\"flex w-full flex-col gap-6\">\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n          <Input\n            id=\"input-demo-password\"\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n          <Input\n            id=\"input-demo-tel\"\n            type=\"tel\"\n            placeholder=\"+1 (555) 123-4567\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n          <Input\n            id=\"input-demo-url\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n          <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n          <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n          <Input id=\"input-demo-date\" type=\"date\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n          <Input id=\"input-demo-time\" type=\"time\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n          <Input id=\"input-demo-file\" type=\"file\" />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n        <Select defaultValue=\"usd\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"usd\">USD</SelectItem>\n              <SelectItem value=\"eur\">EUR</SelectItem>\n              <SelectItem value=\"gbp\">GBP</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Button>Search</Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithNativeSelect() {\n  return (\n    <Example title=\"With Native Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n        <NativeSelect defaultValue=\"+1\">\n          <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n          <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n          <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputForm() {\n  return (\n    <Example title=\"Form\">\n      <form className=\"w-full\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n            <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n            <Input\n              id=\"form-email\"\n              type=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <FieldDescription>\n              We&apos;ll never share your email with anyone.\n            </FieldDescription>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n              <Input\n                id=\"form-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n              <Select defaultValue=\"us\">\n                <SelectTrigger id=\"form-country\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"us\">United States</SelectItem>\n                    <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                    <SelectItem value=\"ca\">Canada</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n            <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar.json b/apps/v4/public/r/styles/base-maia/sidebar.json
index 4b9f5ec52..eef36f319 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-maia/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-maia/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-1 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-lg p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-9 text-sm\",\n        sm: \"h-8 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { useIsMobile } from \"@/registry/base-maia/hooks/use-mobile\"\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-maia/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-maia/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 [--radius:var(--radius-xl)] flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-2 [--radius:var(--radius-xl)] flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-1 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-lg p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-9 text-sm\",\n        sm: \"h-8 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/command-example.json b/apps/v4/public/r/styles/base-mira/command-example.json
index 552a72bd9..9f10f6d3f 100644
--- a/apps/v4/public/r/styles/base-mira/command-example.json
+++ b/apps/v4/public/r/styles/base-mira/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-mira/ui/card\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/base-mira/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-mira/ui/card\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/base-mira/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"w-full p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/drawer.json b/apps/v4/public/r/styles/base-mira/drawer.json
index 3cd4341e9..88c6054ab 100644
--- a/apps/v4/public/r/styles/base-mira/drawer.json
+++ b/apps/v4/public/r/styles/base-mira/drawer.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"before:bg-background flex h-auto flex-col bg-transparent p-2 text-xs/relaxed before:absolute before:inset-2 before:-z-10 before:rounded-xl data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mt-4 h-1.5 w-[100px] rounded-full mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\"gap-1 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"before:bg-background before:border-border flex h-auto flex-col bg-transparent p-2 text-xs/relaxed before:absolute before:inset-2 before:-z-10 before:rounded-xl before:border data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mt-4 h-1.5 w-[100px] rounded-full mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\"gap-1 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/input-example.json b/apps/v4/public/r/styles/base-mira/input-example.json
index ff322ceca..141dbad8e 100644
--- a/apps/v4/public/r/styles/base-mira/input-example.json
+++ b/apps/v4/public/r/styles/base-mira/input-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/input-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-mira/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-mira/ui/select\"\n\nexport default function InputExample() {\n  return (\n    <ExampleWrapper>\n      <InputBasic />\n      <InputInvalid />\n      <InputWithLabel />\n      <InputWithDescription />\n      <InputDisabled />\n      <InputTypes />\n      <InputWithSelect />\n      <InputWithButton />\n      <InputWithNativeSelect />\n      <InputForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Example>\n  )\n}\n\nfunction InputInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction InputWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-email\"\n          type=\"email\"\n          placeholder=\"name@example.com\"\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n        <Input\n          id=\"input-demo-username\"\n          type=\"text\"\n          placeholder=\"Enter your username\"\n        />\n        <FieldDescription>\n          Choose a unique username for your account.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-disabled\"\n          type=\"email\"\n          placeholder=\"Email\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputTypes() {\n  return (\n    <Example title=\"Input Types\">\n      <div className=\"flex w-full flex-col gap-6\">\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n          <Input\n            id=\"input-demo-password\"\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n          <Input\n            id=\"input-demo-tel\"\n            type=\"tel\"\n            placeholder=\"+1 (555) 123-4567\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n          <Input\n            id=\"input-demo-url\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n          <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n          <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n          <Input id=\"input-demo-date\" type=\"date\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n          <Input id=\"input-demo-time\" type=\"time\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n          <Input id=\"input-demo-file\" type=\"file\" />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n        <Select defaultValue=\"usd\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"usd\">USD</SelectItem>\n            <SelectItem value=\"eur\">EUR</SelectItem>\n            <SelectItem value=\"gbp\">GBP</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Button>Search</Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithNativeSelect() {\n  return (\n    <Example title=\"With Native Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n        <NativeSelect defaultValue=\"+1\">\n          <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n          <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n          <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputForm() {\n  return (\n    <Example title=\"Form\">\n      <form className=\"w-full\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n            <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n            <Input\n              id=\"form-email\"\n              type=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <FieldDescription>\n              We&apos;ll never share your email with anyone.\n            </FieldDescription>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n              <Input\n                id=\"form-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n              <Select defaultValue=\"us\">\n                <SelectTrigger id=\"form-country\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"us\">United States</SelectItem>\n                  <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                  <SelectItem value=\"ca\">Canada</SelectItem>\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n            <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-mira/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-mira/ui/select\"\n\nexport default function InputExample() {\n  return (\n    <ExampleWrapper>\n      <InputBasic />\n      <InputInvalid />\n      <InputWithLabel />\n      <InputWithDescription />\n      <InputDisabled />\n      <InputTypes />\n      <InputWithSelect />\n      <InputWithButton />\n      <InputWithNativeSelect />\n      <InputForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Example>\n  )\n}\n\nfunction InputInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction InputWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-email\"\n          type=\"email\"\n          placeholder=\"name@example.com\"\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n        <Input\n          id=\"input-demo-username\"\n          type=\"text\"\n          placeholder=\"Enter your username\"\n        />\n        <FieldDescription>\n          Choose a unique username for your account.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-disabled\"\n          type=\"email\"\n          placeholder=\"Email\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputTypes() {\n  return (\n    <Example title=\"Input Types\">\n      <div className=\"flex w-full flex-col gap-6\">\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n          <Input\n            id=\"input-demo-password\"\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n          <Input\n            id=\"input-demo-tel\"\n            type=\"tel\"\n            placeholder=\"+1 (555) 123-4567\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n          <Input\n            id=\"input-demo-url\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n          <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n          <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n          <Input id=\"input-demo-date\" type=\"date\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n          <Input id=\"input-demo-time\" type=\"time\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n          <Input id=\"input-demo-file\" type=\"file\" />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n        <Select defaultValue=\"usd\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"usd\">USD</SelectItem>\n              <SelectItem value=\"eur\">EUR</SelectItem>\n              <SelectItem value=\"gbp\">GBP</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Button>Search</Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithNativeSelect() {\n  return (\n    <Example title=\"With Native Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n        <NativeSelect defaultValue=\"+1\">\n          <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n          <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n          <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputForm() {\n  return (\n    <Example title=\"Form\">\n      <form className=\"w-full\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n            <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n            <Input\n              id=\"form-email\"\n              type=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <FieldDescription>\n              We&apos;ll never share your email with anyone.\n            </FieldDescription>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n              <Input\n                id=\"form-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n              <Select defaultValue=\"us\">\n                <SelectTrigger id=\"form-country\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"us\">United States</SelectItem>\n                    <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                    <SelectItem value=\"ca\">Canada</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n            <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar.json b/apps/v4/public/r/styles/base-mira/sidebar.json
index 720dc6d2c..508cdb12d 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-mira/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-mira/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-muted/20 dark:bg-muted/30 border-input h-8 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"px-2 py-1 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-xs w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-px flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-[calc(var(--radius-sm)+2px)] p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-[calc(var(--radius-sm)-2px)] p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-[calc(var(--radius-sm)-2px)] px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { useIsMobile } from \"@/registry/base-mira/hooks/use-mobile\"\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-mira/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-mira/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-muted/20 dark:bg-muted/30 border-input h-8 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"px-2 py-1 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-xs w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-px flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-[calc(var(--radius-sm)+2px)] p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-[calc(var(--radius-sm)-2px)] p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-[calc(var(--radius-sm)-2px)] px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/command-example.json b/apps/v4/public/r/styles/base-nova/command-example.json
index b9870cfae..814b144ea 100644
--- a/apps/v4/public/r/styles/base-nova/command-example.json
+++ b/apps/v4/public/r/styles/base-nova/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-nova/ui/card\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/base-nova/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-nova/ui/card\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/base-nova/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"w-full p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/input-example.json b/apps/v4/public/r/styles/base-nova/input-example.json
index f67a6a69f..3b5421a7d 100644
--- a/apps/v4/public/r/styles/base-nova/input-example.json
+++ b/apps/v4/public/r/styles/base-nova/input-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/input-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-nova/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-nova/ui/select\"\n\nexport default function InputExample() {\n  return (\n    <ExampleWrapper>\n      <InputBasic />\n      <InputInvalid />\n      <InputWithLabel />\n      <InputWithDescription />\n      <InputDisabled />\n      <InputTypes />\n      <InputWithSelect />\n      <InputWithButton />\n      <InputWithNativeSelect />\n      <InputForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Example>\n  )\n}\n\nfunction InputInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction InputWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-email\"\n          type=\"email\"\n          placeholder=\"name@example.com\"\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n        <Input\n          id=\"input-demo-username\"\n          type=\"text\"\n          placeholder=\"Enter your username\"\n        />\n        <FieldDescription>\n          Choose a unique username for your account.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-disabled\"\n          type=\"email\"\n          placeholder=\"Email\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputTypes() {\n  return (\n    <Example title=\"Input Types\">\n      <div className=\"flex w-full flex-col gap-6\">\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n          <Input\n            id=\"input-demo-password\"\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n          <Input\n            id=\"input-demo-tel\"\n            type=\"tel\"\n            placeholder=\"+1 (555) 123-4567\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n          <Input\n            id=\"input-demo-url\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n          <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n          <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n          <Input id=\"input-demo-date\" type=\"date\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n          <Input id=\"input-demo-time\" type=\"time\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n          <Input id=\"input-demo-file\" type=\"file\" />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n        <Select defaultValue=\"usd\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"usd\">USD</SelectItem>\n            <SelectItem value=\"eur\">EUR</SelectItem>\n            <SelectItem value=\"gbp\">GBP</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Button>Search</Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithNativeSelect() {\n  return (\n    <Example title=\"With Native Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n        <NativeSelect defaultValue=\"+1\">\n          <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n          <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n          <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputForm() {\n  return (\n    <Example title=\"Form\">\n      <form className=\"w-full\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n            <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n            <Input\n              id=\"form-email\"\n              type=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <FieldDescription>\n              We&apos;ll never share your email with anyone.\n            </FieldDescription>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n              <Input\n                id=\"form-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n              <Select defaultValue=\"us\">\n                <SelectTrigger id=\"form-country\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"us\">United States</SelectItem>\n                  <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                  <SelectItem value=\"ca\">Canada</SelectItem>\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n            <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-nova/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-nova/ui/select\"\n\nexport default function InputExample() {\n  return (\n    <ExampleWrapper>\n      <InputBasic />\n      <InputInvalid />\n      <InputWithLabel />\n      <InputWithDescription />\n      <InputDisabled />\n      <InputTypes />\n      <InputWithSelect />\n      <InputWithButton />\n      <InputWithNativeSelect />\n      <InputForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Example>\n  )\n}\n\nfunction InputInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction InputWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-email\"\n          type=\"email\"\n          placeholder=\"name@example.com\"\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n        <Input\n          id=\"input-demo-username\"\n          type=\"text\"\n          placeholder=\"Enter your username\"\n        />\n        <FieldDescription>\n          Choose a unique username for your account.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-disabled\"\n          type=\"email\"\n          placeholder=\"Email\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputTypes() {\n  return (\n    <Example title=\"Input Types\">\n      <div className=\"flex w-full flex-col gap-6\">\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n          <Input\n            id=\"input-demo-password\"\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n          <Input\n            id=\"input-demo-tel\"\n            type=\"tel\"\n            placeholder=\"+1 (555) 123-4567\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n          <Input\n            id=\"input-demo-url\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n          <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n          <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n          <Input id=\"input-demo-date\" type=\"date\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n          <Input id=\"input-demo-time\" type=\"time\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n          <Input id=\"input-demo-file\" type=\"file\" />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n        <Select defaultValue=\"usd\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"usd\">USD</SelectItem>\n              <SelectItem value=\"eur\">EUR</SelectItem>\n              <SelectItem value=\"gbp\">GBP</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Button>Search</Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithNativeSelect() {\n  return (\n    <Example title=\"With Native Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n        <NativeSelect defaultValue=\"+1\">\n          <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n          <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n          <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputForm() {\n  return (\n    <Example title=\"Form\">\n      <form className=\"w-full\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n            <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n            <Input\n              id=\"form-email\"\n              type=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <FieldDescription>\n              We&apos;ll never share your email with anyone.\n            </FieldDescription>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n              <Input\n                id=\"form-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n              <Select defaultValue=\"us\">\n                <SelectTrigger id=\"form-country\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"us\">United States</SelectItem>\n                    <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                    <SelectItem value=\"ca\">Canada</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n            <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar.json b/apps/v4/public/r/styles/base-nova/sidebar.json
index 8c795665f..00209f1b0 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-nova/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-nova/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-0 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { useIsMobile } from \"@/registry/base-nova/hooks/use-mobile\"\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-nova/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-nova/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-0 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/command-example.json b/apps/v4/public/r/styles/base-vega/command-example.json
index 4fc3e8d54..2d2ffbc43 100644
--- a/apps/v4/public/r/styles/base-vega/command-example.json
+++ b/apps/v4/public/r/styles/base-vega/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-vega/ui/card\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/base-vega/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-vega/ui/card\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/base-vega/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"w-full p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/input-example.json b/apps/v4/public/r/styles/base-vega/input-example.json
index 97e003e1f..e66d0c0dd 100644
--- a/apps/v4/public/r/styles/base-vega/input-example.json
+++ b/apps/v4/public/r/styles/base-vega/input-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/input-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-vega/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-vega/ui/select\"\n\nexport default function InputExample() {\n  return (\n    <ExampleWrapper>\n      <InputBasic />\n      <InputInvalid />\n      <InputWithLabel />\n      <InputWithDescription />\n      <InputDisabled />\n      <InputTypes />\n      <InputWithSelect />\n      <InputWithButton />\n      <InputWithNativeSelect />\n      <InputForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Example>\n  )\n}\n\nfunction InputInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction InputWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-email\"\n          type=\"email\"\n          placeholder=\"name@example.com\"\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n        <Input\n          id=\"input-demo-username\"\n          type=\"text\"\n          placeholder=\"Enter your username\"\n        />\n        <FieldDescription>\n          Choose a unique username for your account.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-disabled\"\n          type=\"email\"\n          placeholder=\"Email\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputTypes() {\n  return (\n    <Example title=\"Input Types\">\n      <div className=\"flex w-full flex-col gap-6\">\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n          <Input\n            id=\"input-demo-password\"\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n          <Input\n            id=\"input-demo-tel\"\n            type=\"tel\"\n            placeholder=\"+1 (555) 123-4567\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n          <Input\n            id=\"input-demo-url\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n          <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n          <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n          <Input id=\"input-demo-date\" type=\"date\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n          <Input id=\"input-demo-time\" type=\"time\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n          <Input id=\"input-demo-file\" type=\"file\" />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n        <Select defaultValue=\"usd\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"usd\">USD</SelectItem>\n            <SelectItem value=\"eur\">EUR</SelectItem>\n            <SelectItem value=\"gbp\">GBP</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Button>Search</Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithNativeSelect() {\n  return (\n    <Example title=\"With Native Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n        <NativeSelect defaultValue=\"+1\">\n          <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n          <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n          <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputForm() {\n  return (\n    <Example title=\"Form\">\n      <form className=\"w-full\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n            <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n            <Input\n              id=\"form-email\"\n              type=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <FieldDescription>\n              We&apos;ll never share your email with anyone.\n            </FieldDescription>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n              <Input\n                id=\"form-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n              <Select defaultValue=\"us\">\n                <SelectTrigger id=\"form-country\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"us\">United States</SelectItem>\n                  <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                  <SelectItem value=\"ca\">Canada</SelectItem>\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n            <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-vega/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-vega/ui/select\"\n\nexport default function InputExample() {\n  return (\n    <ExampleWrapper>\n      <InputBasic />\n      <InputInvalid />\n      <InputWithLabel />\n      <InputWithDescription />\n      <InputDisabled />\n      <InputTypes />\n      <InputWithSelect />\n      <InputWithButton />\n      <InputWithNativeSelect />\n      <InputForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Example>\n  )\n}\n\nfunction InputInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction InputWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-email\"\n          type=\"email\"\n          placeholder=\"name@example.com\"\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n        <Input\n          id=\"input-demo-username\"\n          type=\"text\"\n          placeholder=\"Enter your username\"\n        />\n        <FieldDescription>\n          Choose a unique username for your account.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-disabled\"\n          type=\"email\"\n          placeholder=\"Email\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputTypes() {\n  return (\n    <Example title=\"Input Types\">\n      <div className=\"flex w-full flex-col gap-6\">\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n          <Input\n            id=\"input-demo-password\"\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n          <Input\n            id=\"input-demo-tel\"\n            type=\"tel\"\n            placeholder=\"+1 (555) 123-4567\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n          <Input\n            id=\"input-demo-url\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n          <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n          <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n          <Input id=\"input-demo-date\" type=\"date\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n          <Input id=\"input-demo-time\" type=\"time\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n          <Input id=\"input-demo-file\" type=\"file\" />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n        <Select defaultValue=\"usd\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"usd\">USD</SelectItem>\n              <SelectItem value=\"eur\">EUR</SelectItem>\n              <SelectItem value=\"gbp\">GBP</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Button>Search</Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithNativeSelect() {\n  return (\n    <Example title=\"With Native Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n        <NativeSelect defaultValue=\"+1\">\n          <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n          <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n          <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputForm() {\n  return (\n    <Example title=\"Form\">\n      <form className=\"w-full\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n            <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n            <Input\n              id=\"form-email\"\n              type=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <FieldDescription>\n              We&apos;ll never share your email with anyone.\n            </FieldDescription>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n              <Input\n                id=\"form-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n              <Select defaultValue=\"us\">\n                <SelectTrigger id=\"form-country\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"us\">United States</SelectItem>\n                    <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                    <SelectItem value=\"ca\">Canada</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n            <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar.json b/apps/v4/public/r/styles/base-vega/sidebar.json
index 1237b676d..ba060cadb 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-vega/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-vega/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-1 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { useIsMobile } from \"@/registry/base-vega/hooks/use-mobile\"\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-vega/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-vega/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-1 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/button-group-example.json b/apps/v4/public/r/styles/radix-lyra/button-group-example.json
index 0ae1c4286..d14358948 100644
--- a/apps/v4/public/r/styles/radix-lyra/button-group-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/button-group-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/button-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-lyra/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport { Label } from \"@/registry/radix-lyra/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText asChild>\n            <Label htmlFor=\"input-text\">GPU Size</Label>\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeOffIcon\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                    phosphor=\"SpeakerSlashIcon\"\n                    remixicon=\"RiVolumeMuteLine\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                    phosphor=\"UserMinusIcon\"\n                    remixicon=\"RiUserUnfollowLine\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelect() {\n  const [currency, setCurrency] = useState(\"$\")\n\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select value={currency} onValueChange={setCurrency}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectItem value=\"$\">$</SelectItem>\n              <SelectItem value=\"€\">€</SelectItem>\n              <SelectItem value=\"£\">£</SelectItem>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n                phosphor=\"MinusIcon\"\n                remixicon=\"RiSubtractLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button variant=\"outline\" asChild size=\"icon\" className=\"w-12\">\n          <span>1.2K</span>\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select defaultValue=\"hours\">\n          <SelectTrigger id=\"duration\">\n            <SelectValue placeholder=\"Select duration\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectItem value=\"hours\">Hours</SelectItem>\n            <SelectItem value=\"days\">Days</SelectItem>\n            <SelectItem value=\"weeks\">Weeks</SelectItem>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconHeadphones\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                    remixicon=\"RiMicLine\"\n                  />\n                </InputGroupAddon>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            remixicon=\"RiArrowLeftLine\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n              phosphor=\"MinusIcon\"\n              remixicon=\"RiSubtractLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n              phosphor=\"CopyIcon\"\n              remixicon=\"RiFileCopyLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n              phosphor=\"ShareIcon\"\n              remixicon=\"RiShareLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n              phosphor=\"TrashIcon\"\n              remixicon=\"RiDeleteBinLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-lyra/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport { Label } from \"@/registry/radix-lyra/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText asChild>\n            <Label htmlFor=\"input-text\">GPU Size</Label>\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeOffIcon\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                    phosphor=\"SpeakerSlashIcon\"\n                    remixicon=\"RiVolumeMuteLine\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                    phosphor=\"UserMinusIcon\"\n                    remixicon=\"RiUserUnfollowLine\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelect() {\n  const [currency, setCurrency] = useState(\"$\")\n\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select value={currency} onValueChange={setCurrency}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectGroup>\n                <SelectItem value=\"$\">$</SelectItem>\n                <SelectItem value=\"€\">€</SelectItem>\n                <SelectItem value=\"£\">£</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n                phosphor=\"MinusIcon\"\n                remixicon=\"RiSubtractLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button variant=\"outline\" asChild size=\"icon\" className=\"w-12\">\n          <span>1.2K</span>\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select defaultValue=\"hours\">\n          <SelectTrigger id=\"duration\">\n            <SelectValue placeholder=\"Select duration\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectGroup>\n              <SelectItem value=\"hours\">Hours</SelectItem>\n              <SelectItem value=\"days\">Days</SelectItem>\n              <SelectItem value=\"weeks\">Weeks</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconHeadphones\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                    remixicon=\"RiMicLine\"\n                  />\n                </InputGroupAddon>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            remixicon=\"RiArrowLeftLine\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n              phosphor=\"MinusIcon\"\n              remixicon=\"RiSubtractLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n              phosphor=\"CopyIcon\"\n              remixicon=\"RiFileCopyLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n              phosphor=\"ShareIcon\"\n              remixicon=\"RiShareLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n              phosphor=\"TrashIcon\"\n              remixicon=\"RiDeleteBinLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/command-example.json b/apps/v4/public/r/styles/radix-lyra/command-example.json
index 931c76783..78e4c21e7 100644
--- a/apps/v4/public/r/styles/radix-lyra/command-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/radix-lyra/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/radix-lyra/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"w-full p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/dialog-example.json b/apps/v4/public/r/styles/radix-lyra/dialog-example.json
index 051b495d1..d091a70e8 100644
--- a/apps/v4/public/r/styles/radix-lyra/dialog-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-lyra/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-lyra/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-lyra/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"light\">Light</SelectItem>\n                            <SelectItem value=\"dark\">Dark</SelectItem>\n                            <SelectItem value=\"system\">System</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"default\">\n                              <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                              Default\n                            </SelectItem>\n                            <SelectItem value=\"red\">\n                              <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                              Red\n                            </SelectItem>\n                            <SelectItem value=\"blue\">\n                              <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                              Blue\n                            </SelectItem>\n                            <SelectItem value=\"green\">\n                              <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                              Green\n                            </SelectItem>\n                            <SelectItem value=\"purple\">\n                              <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                              Purple\n                            </SelectItem>\n                            <SelectItem value=\"pink\">\n                              <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                              Pink\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectItem value=\"auto\">Auto</SelectItem>\n                            <SelectSeparator />\n                            {spokenLanguages.map((language) => (\n                              <SelectItem\n                                key={language.value}\n                                value={language.value}\n                              >\n                                {language.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            {voices.map((voice) => (\n                              <SelectItem key={voice.value} value={voice.value}>\n                                {voice.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                  remixicon=\"RiInformationLine\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-lyra/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-lyra/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-lyra/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"light\">Light</SelectItem>\n                              <SelectItem value=\"dark\">Dark</SelectItem>\n                              <SelectItem value=\"system\">System</SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"default\">\n                                <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                                Default\n                              </SelectItem>\n                              <SelectItem value=\"red\">\n                                <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                                Red\n                              </SelectItem>\n                              <SelectItem value=\"blue\">\n                                <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                                Blue\n                              </SelectItem>\n                              <SelectItem value=\"green\">\n                                <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                                Green\n                              </SelectItem>\n                              <SelectItem value=\"purple\">\n                                <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                                Purple\n                              </SelectItem>\n                              <SelectItem value=\"pink\">\n                                <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                                Pink\n                              </SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              <SelectItem value=\"auto\">Auto</SelectItem>\n                            </SelectGroup>\n                            <SelectSeparator />\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                  remixicon=\"RiInformationLine\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/field-example.json b/apps/v4/public/r/styles/radix-lyra/field-example.json
index 49066d514..d2a5f5799 100644
--- a/apps/v4/public/r/styles/radix-lyra/field-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-lyra/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-lyra/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-lyra/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { Slider } from \"@/registry/radix-lyra/ui/slider\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"us\">United States</SelectItem>\n              <SelectItem value=\"uk\">United Kingdom</SelectItem>\n              <SelectItem value=\"ca\">Canada</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"utc\">UTC</SelectItem>\n              <SelectItem value=\"est\">Eastern Time</SelectItem>\n              <SelectItem value=\"pst\">Pacific Time</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-lyra/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-lyra/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-lyra/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { Slider } from \"@/registry/radix-lyra/ui/slider\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"us\">United States</SelectItem>\n                <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                <SelectItem value=\"ca\">Canada</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"utc\">UTC</SelectItem>\n                <SelectItem value=\"est\">Eastern Time</SelectItem>\n                <SelectItem value=\"pst\">Pacific Time</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/input-example.json b/apps/v4/public/r/styles/radix-lyra/input-example.json
index 2a55da70d..b1f74413d 100644
--- a/apps/v4/public/r/styles/radix-lyra/input-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/input-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/input-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-lyra/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\n\nexport default function InputExample() {\n  return (\n    <ExampleWrapper>\n      <InputBasic />\n      <InputInvalid />\n      <InputWithLabel />\n      <InputWithDescription />\n      <InputDisabled />\n      <InputTypes />\n      <InputWithSelect />\n      <InputWithButton />\n      <InputWithNativeSelect />\n      <InputForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Example>\n  )\n}\n\nfunction InputInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction InputWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-email\"\n          type=\"email\"\n          placeholder=\"name@example.com\"\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n        <Input\n          id=\"input-demo-username\"\n          type=\"text\"\n          placeholder=\"Enter your username\"\n        />\n        <FieldDescription>\n          Choose a unique username for your account.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-disabled\"\n          type=\"email\"\n          placeholder=\"Email\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputTypes() {\n  return (\n    <Example title=\"Input Types\">\n      <div className=\"flex w-full flex-col gap-6\">\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n          <Input\n            id=\"input-demo-password\"\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n          <Input\n            id=\"input-demo-tel\"\n            type=\"tel\"\n            placeholder=\"+1 (555) 123-4567\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n          <Input\n            id=\"input-demo-url\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n          <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n          <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n          <Input id=\"input-demo-date\" type=\"date\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n          <Input id=\"input-demo-time\" type=\"time\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n          <Input id=\"input-demo-file\" type=\"file\" />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n        <Select defaultValue=\"usd\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"usd\">USD</SelectItem>\n            <SelectItem value=\"eur\">EUR</SelectItem>\n            <SelectItem value=\"gbp\">GBP</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Button>Search</Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithNativeSelect() {\n  return (\n    <Example title=\"With Native Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n        <NativeSelect defaultValue=\"+1\">\n          <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n          <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n          <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputForm() {\n  return (\n    <Example title=\"Form\">\n      <form className=\"w-full\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n            <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n            <Input\n              id=\"form-email\"\n              type=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <FieldDescription>\n              We&apos;ll never share your email with anyone.\n            </FieldDescription>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n              <Input\n                id=\"form-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n              <Select defaultValue=\"us\">\n                <SelectTrigger id=\"form-country\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"us\">United States</SelectItem>\n                  <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                  <SelectItem value=\"ca\">Canada</SelectItem>\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n            <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-lyra/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\n\nexport default function InputExample() {\n  return (\n    <ExampleWrapper>\n      <InputBasic />\n      <InputInvalid />\n      <InputWithLabel />\n      <InputWithDescription />\n      <InputDisabled />\n      <InputTypes />\n      <InputWithSelect />\n      <InputWithButton />\n      <InputWithNativeSelect />\n      <InputForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Example>\n  )\n}\n\nfunction InputInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction InputWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-email\"\n          type=\"email\"\n          placeholder=\"name@example.com\"\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n        <Input\n          id=\"input-demo-username\"\n          type=\"text\"\n          placeholder=\"Enter your username\"\n        />\n        <FieldDescription>\n          Choose a unique username for your account.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-disabled\"\n          type=\"email\"\n          placeholder=\"Email\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputTypes() {\n  return (\n    <Example title=\"Input Types\">\n      <div className=\"flex w-full flex-col gap-6\">\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n          <Input\n            id=\"input-demo-password\"\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n          <Input\n            id=\"input-demo-tel\"\n            type=\"tel\"\n            placeholder=\"+1 (555) 123-4567\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n          <Input\n            id=\"input-demo-url\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n          <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n          <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n          <Input id=\"input-demo-date\" type=\"date\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n          <Input id=\"input-demo-time\" type=\"time\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n          <Input id=\"input-demo-file\" type=\"file\" />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n        <Select defaultValue=\"usd\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"usd\">USD</SelectItem>\n              <SelectItem value=\"eur\">EUR</SelectItem>\n              <SelectItem value=\"gbp\">GBP</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Button>Search</Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithNativeSelect() {\n  return (\n    <Example title=\"With Native Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n        <NativeSelect defaultValue=\"+1\">\n          <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n          <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n          <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputForm() {\n  return (\n    <Example title=\"Form\">\n      <form className=\"w-full\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n            <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n            <Input\n              id=\"form-email\"\n              type=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <FieldDescription>\n              We&apos;ll never share your email with anyone.\n            </FieldDescription>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n              <Input\n                id=\"form-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n              <Select defaultValue=\"us\">\n                <SelectTrigger id=\"form-country\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"us\">United States</SelectItem>\n                    <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                    <SelectItem value=\"ca\">Canada</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n            <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar.json b/apps/v4/public/r/styles/radix-lyra/sidebar.json
index 6a9b5e69e..3ea21d85e 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-lyra/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-lyra/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-lyra/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-none px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-none p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-xs w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-0 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-none p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-none p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-none px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-none px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-none\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { useIsMobile } from \"@/registry/radix-lyra/hooks/use-mobile\"\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-lyra/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-lyra/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-none px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-none p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-xs w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-0 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-none p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-none p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-none px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-none px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-none\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/button-group-example.json b/apps/v4/public/r/styles/radix-maia/button-group-example.json
index 72472cbf1..695e0a4c7 100644
--- a/apps/v4/public/r/styles/radix-maia/button-group-example.json
+++ b/apps/v4/public/r/styles/radix-maia/button-group-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/button-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-maia/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport { Label } from \"@/registry/radix-maia/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText asChild>\n            <Label htmlFor=\"input-text\">GPU Size</Label>\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeOffIcon\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                    phosphor=\"SpeakerSlashIcon\"\n                    remixicon=\"RiVolumeMuteLine\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                    phosphor=\"UserMinusIcon\"\n                    remixicon=\"RiUserUnfollowLine\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelect() {\n  const [currency, setCurrency] = useState(\"$\")\n\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select value={currency} onValueChange={setCurrency}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectItem value=\"$\">$</SelectItem>\n              <SelectItem value=\"€\">€</SelectItem>\n              <SelectItem value=\"£\">£</SelectItem>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n                phosphor=\"MinusIcon\"\n                remixicon=\"RiSubtractLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button variant=\"outline\" asChild size=\"icon\" className=\"w-12\">\n          <span>1.2K</span>\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select defaultValue=\"hours\">\n          <SelectTrigger id=\"duration\">\n            <SelectValue placeholder=\"Select duration\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectItem value=\"hours\">Hours</SelectItem>\n            <SelectItem value=\"days\">Days</SelectItem>\n            <SelectItem value=\"weeks\">Weeks</SelectItem>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconHeadphones\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                    remixicon=\"RiMicLine\"\n                  />\n                </InputGroupAddon>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            remixicon=\"RiArrowLeftLine\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n              phosphor=\"MinusIcon\"\n              remixicon=\"RiSubtractLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n              phosphor=\"CopyIcon\"\n              remixicon=\"RiFileCopyLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n              phosphor=\"ShareIcon\"\n              remixicon=\"RiShareLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n              phosphor=\"TrashIcon\"\n              remixicon=\"RiDeleteBinLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-maia/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport { Label } from \"@/registry/radix-maia/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText asChild>\n            <Label htmlFor=\"input-text\">GPU Size</Label>\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeOffIcon\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                    phosphor=\"SpeakerSlashIcon\"\n                    remixicon=\"RiVolumeMuteLine\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                    phosphor=\"UserMinusIcon\"\n                    remixicon=\"RiUserUnfollowLine\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelect() {\n  const [currency, setCurrency] = useState(\"$\")\n\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select value={currency} onValueChange={setCurrency}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectGroup>\n                <SelectItem value=\"$\">$</SelectItem>\n                <SelectItem value=\"€\">€</SelectItem>\n                <SelectItem value=\"£\">£</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n                phosphor=\"MinusIcon\"\n                remixicon=\"RiSubtractLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button variant=\"outline\" asChild size=\"icon\" className=\"w-12\">\n          <span>1.2K</span>\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select defaultValue=\"hours\">\n          <SelectTrigger id=\"duration\">\n            <SelectValue placeholder=\"Select duration\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectGroup>\n              <SelectItem value=\"hours\">Hours</SelectItem>\n              <SelectItem value=\"days\">Days</SelectItem>\n              <SelectItem value=\"weeks\">Weeks</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconHeadphones\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                    remixicon=\"RiMicLine\"\n                  />\n                </InputGroupAddon>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            remixicon=\"RiArrowLeftLine\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n              phosphor=\"MinusIcon\"\n              remixicon=\"RiSubtractLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n              phosphor=\"CopyIcon\"\n              remixicon=\"RiFileCopyLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n              phosphor=\"ShareIcon\"\n              remixicon=\"RiShareLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n              phosphor=\"TrashIcon\"\n              remixicon=\"RiDeleteBinLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/command-example.json b/apps/v4/public/r/styles/radix-maia/command-example.json
index 5cf41ebd7..b471e402f 100644
--- a/apps/v4/public/r/styles/radix-maia/command-example.json
+++ b/apps/v4/public/r/styles/radix-maia/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-maia/ui/card\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/radix-maia/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-maia/ui/card\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/radix-maia/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"w-full p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/dialog-example.json b/apps/v4/public/r/styles/radix-maia/dialog-example.json
index 51f8ffde6..38476073b 100644
--- a/apps/v4/public/r/styles/radix-maia/dialog-example.json
+++ b/apps/v4/public/r/styles/radix-maia/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-maia/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-maia/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-maia/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"light\">Light</SelectItem>\n                            <SelectItem value=\"dark\">Dark</SelectItem>\n                            <SelectItem value=\"system\">System</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"default\">\n                              <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                              Default\n                            </SelectItem>\n                            <SelectItem value=\"red\">\n                              <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                              Red\n                            </SelectItem>\n                            <SelectItem value=\"blue\">\n                              <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                              Blue\n                            </SelectItem>\n                            <SelectItem value=\"green\">\n                              <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                              Green\n                            </SelectItem>\n                            <SelectItem value=\"purple\">\n                              <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                              Purple\n                            </SelectItem>\n                            <SelectItem value=\"pink\">\n                              <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                              Pink\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectItem value=\"auto\">Auto</SelectItem>\n                            <SelectSeparator />\n                            {spokenLanguages.map((language) => (\n                              <SelectItem\n                                key={language.value}\n                                value={language.value}\n                              >\n                                {language.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            {voices.map((voice) => (\n                              <SelectItem key={voice.value} value={voice.value}>\n                                {voice.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                  remixicon=\"RiInformationLine\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-maia/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-maia/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-maia/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"light\">Light</SelectItem>\n                              <SelectItem value=\"dark\">Dark</SelectItem>\n                              <SelectItem value=\"system\">System</SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"default\">\n                                <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                                Default\n                              </SelectItem>\n                              <SelectItem value=\"red\">\n                                <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                                Red\n                              </SelectItem>\n                              <SelectItem value=\"blue\">\n                                <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                                Blue\n                              </SelectItem>\n                              <SelectItem value=\"green\">\n                                <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                                Green\n                              </SelectItem>\n                              <SelectItem value=\"purple\">\n                                <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                                Purple\n                              </SelectItem>\n                              <SelectItem value=\"pink\">\n                                <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                                Pink\n                              </SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              <SelectItem value=\"auto\">Auto</SelectItem>\n                            </SelectGroup>\n                            <SelectSeparator />\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                  remixicon=\"RiInformationLine\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/drawer.json b/apps/v4/public/r/styles/radix-maia/drawer.json
index d313ab58f..e51271dbb 100644
--- a/apps/v4/public/r/styles/radix-maia/drawer.json
+++ b/apps/v4/public/r/styles/radix-maia/drawer.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"before:bg-background flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mt-4 h-1.5 w-[100px] rounded-full mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\"gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"before:bg-background before:border-border flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mt-4 h-1.5 w-[100px] rounded-full mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\"gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/field-example.json b/apps/v4/public/r/styles/radix-maia/field-example.json
index 7f38a3973..2f5f52ac7 100644
--- a/apps/v4/public/r/styles/radix-maia/field-example.json
+++ b/apps/v4/public/r/styles/radix-maia/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-maia/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-maia/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-maia/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { Slider } from \"@/registry/radix-maia/ui/slider\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"us\">United States</SelectItem>\n              <SelectItem value=\"uk\">United Kingdom</SelectItem>\n              <SelectItem value=\"ca\">Canada</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"utc\">UTC</SelectItem>\n              <SelectItem value=\"est\">Eastern Time</SelectItem>\n              <SelectItem value=\"pst\">Pacific Time</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-maia/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-maia/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-maia/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { Slider } from \"@/registry/radix-maia/ui/slider\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"us\">United States</SelectItem>\n                <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                <SelectItem value=\"ca\">Canada</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"utc\">UTC</SelectItem>\n                <SelectItem value=\"est\">Eastern Time</SelectItem>\n                <SelectItem value=\"pst\">Pacific Time</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/input-example.json b/apps/v4/public/r/styles/radix-maia/input-example.json
index d58fb95ce..e3ccd3520 100644
--- a/apps/v4/public/r/styles/radix-maia/input-example.json
+++ b/apps/v4/public/r/styles/radix-maia/input-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/input-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-maia/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\n\nexport default function InputExample() {\n  return (\n    <ExampleWrapper>\n      <InputBasic />\n      <InputInvalid />\n      <InputWithLabel />\n      <InputWithDescription />\n      <InputDisabled />\n      <InputTypes />\n      <InputWithSelect />\n      <InputWithButton />\n      <InputWithNativeSelect />\n      <InputForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Example>\n  )\n}\n\nfunction InputInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction InputWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-email\"\n          type=\"email\"\n          placeholder=\"name@example.com\"\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n        <Input\n          id=\"input-demo-username\"\n          type=\"text\"\n          placeholder=\"Enter your username\"\n        />\n        <FieldDescription>\n          Choose a unique username for your account.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-disabled\"\n          type=\"email\"\n          placeholder=\"Email\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputTypes() {\n  return (\n    <Example title=\"Input Types\">\n      <div className=\"flex w-full flex-col gap-6\">\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n          <Input\n            id=\"input-demo-password\"\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n          <Input\n            id=\"input-demo-tel\"\n            type=\"tel\"\n            placeholder=\"+1 (555) 123-4567\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n          <Input\n            id=\"input-demo-url\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n          <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n          <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n          <Input id=\"input-demo-date\" type=\"date\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n          <Input id=\"input-demo-time\" type=\"time\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n          <Input id=\"input-demo-file\" type=\"file\" />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n        <Select defaultValue=\"usd\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"usd\">USD</SelectItem>\n            <SelectItem value=\"eur\">EUR</SelectItem>\n            <SelectItem value=\"gbp\">GBP</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Button>Search</Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithNativeSelect() {\n  return (\n    <Example title=\"With Native Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n        <NativeSelect defaultValue=\"+1\">\n          <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n          <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n          <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputForm() {\n  return (\n    <Example title=\"Form\">\n      <form className=\"w-full\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n            <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n            <Input\n              id=\"form-email\"\n              type=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <FieldDescription>\n              We&apos;ll never share your email with anyone.\n            </FieldDescription>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n              <Input\n                id=\"form-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n              <Select defaultValue=\"us\">\n                <SelectTrigger id=\"form-country\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"us\">United States</SelectItem>\n                  <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                  <SelectItem value=\"ca\">Canada</SelectItem>\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n            <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-maia/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\n\nexport default function InputExample() {\n  return (\n    <ExampleWrapper>\n      <InputBasic />\n      <InputInvalid />\n      <InputWithLabel />\n      <InputWithDescription />\n      <InputDisabled />\n      <InputTypes />\n      <InputWithSelect />\n      <InputWithButton />\n      <InputWithNativeSelect />\n      <InputForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Example>\n  )\n}\n\nfunction InputInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction InputWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-email\"\n          type=\"email\"\n          placeholder=\"name@example.com\"\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n        <Input\n          id=\"input-demo-username\"\n          type=\"text\"\n          placeholder=\"Enter your username\"\n        />\n        <FieldDescription>\n          Choose a unique username for your account.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-disabled\"\n          type=\"email\"\n          placeholder=\"Email\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputTypes() {\n  return (\n    <Example title=\"Input Types\">\n      <div className=\"flex w-full flex-col gap-6\">\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n          <Input\n            id=\"input-demo-password\"\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n          <Input\n            id=\"input-demo-tel\"\n            type=\"tel\"\n            placeholder=\"+1 (555) 123-4567\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n          <Input\n            id=\"input-demo-url\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n          <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n          <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n          <Input id=\"input-demo-date\" type=\"date\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n          <Input id=\"input-demo-time\" type=\"time\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n          <Input id=\"input-demo-file\" type=\"file\" />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n        <Select defaultValue=\"usd\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"usd\">USD</SelectItem>\n              <SelectItem value=\"eur\">EUR</SelectItem>\n              <SelectItem value=\"gbp\">GBP</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Button>Search</Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithNativeSelect() {\n  return (\n    <Example title=\"With Native Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n        <NativeSelect defaultValue=\"+1\">\n          <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n          <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n          <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputForm() {\n  return (\n    <Example title=\"Form\">\n      <form className=\"w-full\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n            <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n            <Input\n              id=\"form-email\"\n              type=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <FieldDescription>\n              We&apos;ll never share your email with anyone.\n            </FieldDescription>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n              <Input\n                id=\"form-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n              <Select defaultValue=\"us\">\n                <SelectTrigger id=\"form-country\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"us\">United States</SelectItem>\n                    <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                    <SelectItem value=\"ca\">Canada</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n            <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar.json b/apps/v4/public/r/styles/radix-maia/sidebar.json
index 3cfe05851..1fd81ba2a 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-maia/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-maia/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-maia/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-1 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-lg p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-9 text-sm\",\n        sm: \"h-8 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { useIsMobile } from \"@/registry/radix-maia/hooks/use-mobile\"\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-maia/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-maia/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 [--radius:var(--radius-xl)] flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-2 [--radius:var(--radius-xl)] flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-1 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-lg p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-9 text-sm\",\n        sm: \"h-8 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/button-group-example.json b/apps/v4/public/r/styles/radix-mira/button-group-example.json
index 0a03a3068..0cc713baa 100644
--- a/apps/v4/public/r/styles/radix-mira/button-group-example.json
+++ b/apps/v4/public/r/styles/radix-mira/button-group-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/button-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-mira/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport { Label } from \"@/registry/radix-mira/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText asChild>\n            <Label htmlFor=\"input-text\">GPU Size</Label>\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeOffIcon\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                    phosphor=\"SpeakerSlashIcon\"\n                    remixicon=\"RiVolumeMuteLine\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                    phosphor=\"UserMinusIcon\"\n                    remixicon=\"RiUserUnfollowLine\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelect() {\n  const [currency, setCurrency] = useState(\"$\")\n\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select value={currency} onValueChange={setCurrency}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectItem value=\"$\">$</SelectItem>\n              <SelectItem value=\"€\">€</SelectItem>\n              <SelectItem value=\"£\">£</SelectItem>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n                phosphor=\"MinusIcon\"\n                remixicon=\"RiSubtractLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button variant=\"outline\" asChild size=\"icon\" className=\"w-12\">\n          <span>1.2K</span>\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select defaultValue=\"hours\">\n          <SelectTrigger id=\"duration\">\n            <SelectValue placeholder=\"Select duration\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectItem value=\"hours\">Hours</SelectItem>\n            <SelectItem value=\"days\">Days</SelectItem>\n            <SelectItem value=\"weeks\">Weeks</SelectItem>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconHeadphones\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                    remixicon=\"RiMicLine\"\n                  />\n                </InputGroupAddon>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            remixicon=\"RiArrowLeftLine\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n              phosphor=\"MinusIcon\"\n              remixicon=\"RiSubtractLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n              phosphor=\"CopyIcon\"\n              remixicon=\"RiFileCopyLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n              phosphor=\"ShareIcon\"\n              remixicon=\"RiShareLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n              phosphor=\"TrashIcon\"\n              remixicon=\"RiDeleteBinLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-mira/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport { Label } from \"@/registry/radix-mira/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText asChild>\n            <Label htmlFor=\"input-text\">GPU Size</Label>\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeOffIcon\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                    phosphor=\"SpeakerSlashIcon\"\n                    remixicon=\"RiVolumeMuteLine\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                    phosphor=\"UserMinusIcon\"\n                    remixicon=\"RiUserUnfollowLine\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelect() {\n  const [currency, setCurrency] = useState(\"$\")\n\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select value={currency} onValueChange={setCurrency}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectGroup>\n                <SelectItem value=\"$\">$</SelectItem>\n                <SelectItem value=\"€\">€</SelectItem>\n                <SelectItem value=\"£\">£</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n                phosphor=\"MinusIcon\"\n                remixicon=\"RiSubtractLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button variant=\"outline\" asChild size=\"icon\" className=\"w-12\">\n          <span>1.2K</span>\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select defaultValue=\"hours\">\n          <SelectTrigger id=\"duration\">\n            <SelectValue placeholder=\"Select duration\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectGroup>\n              <SelectItem value=\"hours\">Hours</SelectItem>\n              <SelectItem value=\"days\">Days</SelectItem>\n              <SelectItem value=\"weeks\">Weeks</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconHeadphones\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                    remixicon=\"RiMicLine\"\n                  />\n                </InputGroupAddon>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            remixicon=\"RiArrowLeftLine\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n              phosphor=\"MinusIcon\"\n              remixicon=\"RiSubtractLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n              phosphor=\"CopyIcon\"\n              remixicon=\"RiFileCopyLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n              phosphor=\"ShareIcon\"\n              remixicon=\"RiShareLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n              phosphor=\"TrashIcon\"\n              remixicon=\"RiDeleteBinLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/command-example.json b/apps/v4/public/r/styles/radix-mira/command-example.json
index 7cddad98a..39c56824a 100644
--- a/apps/v4/public/r/styles/radix-mira/command-example.json
+++ b/apps/v4/public/r/styles/radix-mira/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-mira/ui/card\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/radix-mira/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-mira/ui/card\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/radix-mira/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"w-full p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/dialog-example.json b/apps/v4/public/r/styles/radix-mira/dialog-example.json
index 9463ea9d2..a6c04eb5e 100644
--- a/apps/v4/public/r/styles/radix-mira/dialog-example.json
+++ b/apps/v4/public/r/styles/radix-mira/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-mira/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-mira/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-mira/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"light\">Light</SelectItem>\n                            <SelectItem value=\"dark\">Dark</SelectItem>\n                            <SelectItem value=\"system\">System</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"default\">\n                              <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                              Default\n                            </SelectItem>\n                            <SelectItem value=\"red\">\n                              <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                              Red\n                            </SelectItem>\n                            <SelectItem value=\"blue\">\n                              <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                              Blue\n                            </SelectItem>\n                            <SelectItem value=\"green\">\n                              <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                              Green\n                            </SelectItem>\n                            <SelectItem value=\"purple\">\n                              <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                              Purple\n                            </SelectItem>\n                            <SelectItem value=\"pink\">\n                              <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                              Pink\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectItem value=\"auto\">Auto</SelectItem>\n                            <SelectSeparator />\n                            {spokenLanguages.map((language) => (\n                              <SelectItem\n                                key={language.value}\n                                value={language.value}\n                              >\n                                {language.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            {voices.map((voice) => (\n                              <SelectItem key={voice.value} value={voice.value}>\n                                {voice.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                  remixicon=\"RiInformationLine\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-mira/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-mira/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-mira/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"light\">Light</SelectItem>\n                              <SelectItem value=\"dark\">Dark</SelectItem>\n                              <SelectItem value=\"system\">System</SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"default\">\n                                <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                                Default\n                              </SelectItem>\n                              <SelectItem value=\"red\">\n                                <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                                Red\n                              </SelectItem>\n                              <SelectItem value=\"blue\">\n                                <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                                Blue\n                              </SelectItem>\n                              <SelectItem value=\"green\">\n                                <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                                Green\n                              </SelectItem>\n                              <SelectItem value=\"purple\">\n                                <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                                Purple\n                              </SelectItem>\n                              <SelectItem value=\"pink\">\n                                <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                                Pink\n                              </SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              <SelectItem value=\"auto\">Auto</SelectItem>\n                            </SelectGroup>\n                            <SelectSeparator />\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                  remixicon=\"RiInformationLine\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/drawer.json b/apps/v4/public/r/styles/radix-mira/drawer.json
index 92a0028f5..f4bc3f9b8 100644
--- a/apps/v4/public/r/styles/radix-mira/drawer.json
+++ b/apps/v4/public/r/styles/radix-mira/drawer.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"before:bg-background flex h-auto flex-col bg-transparent p-2 text-xs/relaxed before:absolute before:inset-2 before:-z-10 before:rounded-xl data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mt-4 h-1.5 w-[100px] rounded-full mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\"gap-1 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"before:bg-background before:border-border flex h-auto flex-col bg-transparent p-2 text-xs/relaxed before:absolute before:inset-2 before:-z-10 before:rounded-xl before:border data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mt-4 h-1.5 w-[100px] rounded-full mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\"gap-1 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/field-example.json b/apps/v4/public/r/styles/radix-mira/field-example.json
index dc5c90934..3e275e071 100644
--- a/apps/v4/public/r/styles/radix-mira/field-example.json
+++ b/apps/v4/public/r/styles/radix-mira/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-mira/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-mira/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-mira/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { Slider } from \"@/registry/radix-mira/ui/slider\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"us\">United States</SelectItem>\n              <SelectItem value=\"uk\">United Kingdom</SelectItem>\n              <SelectItem value=\"ca\">Canada</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"utc\">UTC</SelectItem>\n              <SelectItem value=\"est\">Eastern Time</SelectItem>\n              <SelectItem value=\"pst\">Pacific Time</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-mira/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-mira/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-mira/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { Slider } from \"@/registry/radix-mira/ui/slider\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"us\">United States</SelectItem>\n                <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                <SelectItem value=\"ca\">Canada</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"utc\">UTC</SelectItem>\n                <SelectItem value=\"est\">Eastern Time</SelectItem>\n                <SelectItem value=\"pst\">Pacific Time</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/input-example.json b/apps/v4/public/r/styles/radix-mira/input-example.json
index b071e1997..8eb81df74 100644
--- a/apps/v4/public/r/styles/radix-mira/input-example.json
+++ b/apps/v4/public/r/styles/radix-mira/input-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/input-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-mira/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\n\nexport default function InputExample() {\n  return (\n    <ExampleWrapper>\n      <InputBasic />\n      <InputInvalid />\n      <InputWithLabel />\n      <InputWithDescription />\n      <InputDisabled />\n      <InputTypes />\n      <InputWithSelect />\n      <InputWithButton />\n      <InputWithNativeSelect />\n      <InputForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Example>\n  )\n}\n\nfunction InputInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction InputWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-email\"\n          type=\"email\"\n          placeholder=\"name@example.com\"\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n        <Input\n          id=\"input-demo-username\"\n          type=\"text\"\n          placeholder=\"Enter your username\"\n        />\n        <FieldDescription>\n          Choose a unique username for your account.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-disabled\"\n          type=\"email\"\n          placeholder=\"Email\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputTypes() {\n  return (\n    <Example title=\"Input Types\">\n      <div className=\"flex w-full flex-col gap-6\">\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n          <Input\n            id=\"input-demo-password\"\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n          <Input\n            id=\"input-demo-tel\"\n            type=\"tel\"\n            placeholder=\"+1 (555) 123-4567\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n          <Input\n            id=\"input-demo-url\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n          <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n          <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n          <Input id=\"input-demo-date\" type=\"date\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n          <Input id=\"input-demo-time\" type=\"time\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n          <Input id=\"input-demo-file\" type=\"file\" />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n        <Select defaultValue=\"usd\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"usd\">USD</SelectItem>\n            <SelectItem value=\"eur\">EUR</SelectItem>\n            <SelectItem value=\"gbp\">GBP</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Button>Search</Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithNativeSelect() {\n  return (\n    <Example title=\"With Native Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n        <NativeSelect defaultValue=\"+1\">\n          <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n          <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n          <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputForm() {\n  return (\n    <Example title=\"Form\">\n      <form className=\"w-full\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n            <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n            <Input\n              id=\"form-email\"\n              type=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <FieldDescription>\n              We&apos;ll never share your email with anyone.\n            </FieldDescription>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n              <Input\n                id=\"form-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n              <Select defaultValue=\"us\">\n                <SelectTrigger id=\"form-country\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"us\">United States</SelectItem>\n                  <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                  <SelectItem value=\"ca\">Canada</SelectItem>\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n            <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-mira/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\n\nexport default function InputExample() {\n  return (\n    <ExampleWrapper>\n      <InputBasic />\n      <InputInvalid />\n      <InputWithLabel />\n      <InputWithDescription />\n      <InputDisabled />\n      <InputTypes />\n      <InputWithSelect />\n      <InputWithButton />\n      <InputWithNativeSelect />\n      <InputForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Example>\n  )\n}\n\nfunction InputInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction InputWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-email\"\n          type=\"email\"\n          placeholder=\"name@example.com\"\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n        <Input\n          id=\"input-demo-username\"\n          type=\"text\"\n          placeholder=\"Enter your username\"\n        />\n        <FieldDescription>\n          Choose a unique username for your account.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-disabled\"\n          type=\"email\"\n          placeholder=\"Email\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputTypes() {\n  return (\n    <Example title=\"Input Types\">\n      <div className=\"flex w-full flex-col gap-6\">\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n          <Input\n            id=\"input-demo-password\"\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n          <Input\n            id=\"input-demo-tel\"\n            type=\"tel\"\n            placeholder=\"+1 (555) 123-4567\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n          <Input\n            id=\"input-demo-url\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n          <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n          <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n          <Input id=\"input-demo-date\" type=\"date\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n          <Input id=\"input-demo-time\" type=\"time\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n          <Input id=\"input-demo-file\" type=\"file\" />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n        <Select defaultValue=\"usd\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"usd\">USD</SelectItem>\n              <SelectItem value=\"eur\">EUR</SelectItem>\n              <SelectItem value=\"gbp\">GBP</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Button>Search</Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithNativeSelect() {\n  return (\n    <Example title=\"With Native Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n        <NativeSelect defaultValue=\"+1\">\n          <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n          <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n          <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputForm() {\n  return (\n    <Example title=\"Form\">\n      <form className=\"w-full\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n            <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n            <Input\n              id=\"form-email\"\n              type=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <FieldDescription>\n              We&apos;ll never share your email with anyone.\n            </FieldDescription>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n              <Input\n                id=\"form-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n              <Select defaultValue=\"us\">\n                <SelectTrigger id=\"form-country\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"us\">United States</SelectItem>\n                    <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                    <SelectItem value=\"ca\">Canada</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n            <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar.json b/apps/v4/public/r/styles/radix-mira/sidebar.json
index d3b8e3f9e..135604dea 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-mira/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-mira/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-mira/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-muted/20 dark:bg-muted/30 border-input h-8 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"px-2 py-1 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-xs w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-px flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-[calc(var(--radius-sm)+2px)] p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-[calc(var(--radius-sm)-2px)] p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-[calc(var(--radius-sm)-2px)] px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { useIsMobile } from \"@/registry/radix-mira/hooks/use-mobile\"\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-mira/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-mira/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-muted/20 dark:bg-muted/30 border-input h-8 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"px-2 py-1 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-xs w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-px flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-[calc(var(--radius-sm)+2px)] p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-[calc(var(--radius-sm)-2px)] p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-[calc(var(--radius-sm)-2px)] px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/button-group-example.json b/apps/v4/public/r/styles/radix-nova/button-group-example.json
index fa5094e69..cd20b9abd 100644
--- a/apps/v4/public/r/styles/radix-nova/button-group-example.json
+++ b/apps/v4/public/r/styles/radix-nova/button-group-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/button-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-nova/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport { Label } from \"@/registry/radix-nova/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText asChild>\n            <Label htmlFor=\"input-text\">GPU Size</Label>\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeOffIcon\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                    phosphor=\"SpeakerSlashIcon\"\n                    remixicon=\"RiVolumeMuteLine\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                    phosphor=\"UserMinusIcon\"\n                    remixicon=\"RiUserUnfollowLine\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelect() {\n  const [currency, setCurrency] = useState(\"$\")\n\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select value={currency} onValueChange={setCurrency}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectItem value=\"$\">$</SelectItem>\n              <SelectItem value=\"€\">€</SelectItem>\n              <SelectItem value=\"£\">£</SelectItem>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n                phosphor=\"MinusIcon\"\n                remixicon=\"RiSubtractLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button variant=\"outline\" asChild size=\"icon\" className=\"w-12\">\n          <span>1.2K</span>\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select defaultValue=\"hours\">\n          <SelectTrigger id=\"duration\">\n            <SelectValue placeholder=\"Select duration\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectItem value=\"hours\">Hours</SelectItem>\n            <SelectItem value=\"days\">Days</SelectItem>\n            <SelectItem value=\"weeks\">Weeks</SelectItem>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconHeadphones\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                    remixicon=\"RiMicLine\"\n                  />\n                </InputGroupAddon>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            remixicon=\"RiArrowLeftLine\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n              phosphor=\"MinusIcon\"\n              remixicon=\"RiSubtractLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n              phosphor=\"CopyIcon\"\n              remixicon=\"RiFileCopyLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n              phosphor=\"ShareIcon\"\n              remixicon=\"RiShareLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n              phosphor=\"TrashIcon\"\n              remixicon=\"RiDeleteBinLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-nova/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport { Label } from \"@/registry/radix-nova/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText asChild>\n            <Label htmlFor=\"input-text\">GPU Size</Label>\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeOffIcon\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                    phosphor=\"SpeakerSlashIcon\"\n                    remixicon=\"RiVolumeMuteLine\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                    phosphor=\"UserMinusIcon\"\n                    remixicon=\"RiUserUnfollowLine\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelect() {\n  const [currency, setCurrency] = useState(\"$\")\n\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select value={currency} onValueChange={setCurrency}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectGroup>\n                <SelectItem value=\"$\">$</SelectItem>\n                <SelectItem value=\"€\">€</SelectItem>\n                <SelectItem value=\"£\">£</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n                phosphor=\"MinusIcon\"\n                remixicon=\"RiSubtractLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button variant=\"outline\" asChild size=\"icon\" className=\"w-12\">\n          <span>1.2K</span>\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select defaultValue=\"hours\">\n          <SelectTrigger id=\"duration\">\n            <SelectValue placeholder=\"Select duration\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectGroup>\n              <SelectItem value=\"hours\">Hours</SelectItem>\n              <SelectItem value=\"days\">Days</SelectItem>\n              <SelectItem value=\"weeks\">Weeks</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconHeadphones\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                    remixicon=\"RiMicLine\"\n                  />\n                </InputGroupAddon>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            remixicon=\"RiArrowLeftLine\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n              phosphor=\"MinusIcon\"\n              remixicon=\"RiSubtractLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n              phosphor=\"CopyIcon\"\n              remixicon=\"RiFileCopyLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n              phosphor=\"ShareIcon\"\n              remixicon=\"RiShareLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n              phosphor=\"TrashIcon\"\n              remixicon=\"RiDeleteBinLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/command-example.json b/apps/v4/public/r/styles/radix-nova/command-example.json
index 433dbde7c..aad2708a5 100644
--- a/apps/v4/public/r/styles/radix-nova/command-example.json
+++ b/apps/v4/public/r/styles/radix-nova/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-nova/ui/card\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/radix-nova/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-nova/ui/card\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/radix-nova/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"w-full p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/dialog-example.json b/apps/v4/public/r/styles/radix-nova/dialog-example.json
index 0d1e6b989..e7c576024 100644
--- a/apps/v4/public/r/styles/radix-nova/dialog-example.json
+++ b/apps/v4/public/r/styles/radix-nova/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-nova/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-nova/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-nova/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"light\">Light</SelectItem>\n                            <SelectItem value=\"dark\">Dark</SelectItem>\n                            <SelectItem value=\"system\">System</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"default\">\n                              <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                              Default\n                            </SelectItem>\n                            <SelectItem value=\"red\">\n                              <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                              Red\n                            </SelectItem>\n                            <SelectItem value=\"blue\">\n                              <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                              Blue\n                            </SelectItem>\n                            <SelectItem value=\"green\">\n                              <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                              Green\n                            </SelectItem>\n                            <SelectItem value=\"purple\">\n                              <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                              Purple\n                            </SelectItem>\n                            <SelectItem value=\"pink\">\n                              <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                              Pink\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectItem value=\"auto\">Auto</SelectItem>\n                            <SelectSeparator />\n                            {spokenLanguages.map((language) => (\n                              <SelectItem\n                                key={language.value}\n                                value={language.value}\n                              >\n                                {language.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            {voices.map((voice) => (\n                              <SelectItem key={voice.value} value={voice.value}>\n                                {voice.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                  remixicon=\"RiInformationLine\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-nova/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-nova/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-nova/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"light\">Light</SelectItem>\n                              <SelectItem value=\"dark\">Dark</SelectItem>\n                              <SelectItem value=\"system\">System</SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"default\">\n                                <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                                Default\n                              </SelectItem>\n                              <SelectItem value=\"red\">\n                                <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                                Red\n                              </SelectItem>\n                              <SelectItem value=\"blue\">\n                                <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                                Blue\n                              </SelectItem>\n                              <SelectItem value=\"green\">\n                                <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                                Green\n                              </SelectItem>\n                              <SelectItem value=\"purple\">\n                                <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                                Purple\n                              </SelectItem>\n                              <SelectItem value=\"pink\">\n                                <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                                Pink\n                              </SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              <SelectItem value=\"auto\">Auto</SelectItem>\n                            </SelectGroup>\n                            <SelectSeparator />\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                  remixicon=\"RiInformationLine\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/field-example.json b/apps/v4/public/r/styles/radix-nova/field-example.json
index 1d82457bf..b136b72aa 100644
--- a/apps/v4/public/r/styles/radix-nova/field-example.json
+++ b/apps/v4/public/r/styles/radix-nova/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-nova/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-nova/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-nova/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { Slider } from \"@/registry/radix-nova/ui/slider\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"us\">United States</SelectItem>\n              <SelectItem value=\"uk\">United Kingdom</SelectItem>\n              <SelectItem value=\"ca\">Canada</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"utc\">UTC</SelectItem>\n              <SelectItem value=\"est\">Eastern Time</SelectItem>\n              <SelectItem value=\"pst\">Pacific Time</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-nova/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-nova/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-nova/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { Slider } from \"@/registry/radix-nova/ui/slider\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"us\">United States</SelectItem>\n                <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                <SelectItem value=\"ca\">Canada</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"utc\">UTC</SelectItem>\n                <SelectItem value=\"est\">Eastern Time</SelectItem>\n                <SelectItem value=\"pst\">Pacific Time</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/input-example.json b/apps/v4/public/r/styles/radix-nova/input-example.json
index 47bb2a7c0..40428e4f2 100644
--- a/apps/v4/public/r/styles/radix-nova/input-example.json
+++ b/apps/v4/public/r/styles/radix-nova/input-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/input-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-nova/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\n\nexport default function InputExample() {\n  return (\n    <ExampleWrapper>\n      <InputBasic />\n      <InputInvalid />\n      <InputWithLabel />\n      <InputWithDescription />\n      <InputDisabled />\n      <InputTypes />\n      <InputWithSelect />\n      <InputWithButton />\n      <InputWithNativeSelect />\n      <InputForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Example>\n  )\n}\n\nfunction InputInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction InputWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-email\"\n          type=\"email\"\n          placeholder=\"name@example.com\"\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n        <Input\n          id=\"input-demo-username\"\n          type=\"text\"\n          placeholder=\"Enter your username\"\n        />\n        <FieldDescription>\n          Choose a unique username for your account.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-disabled\"\n          type=\"email\"\n          placeholder=\"Email\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputTypes() {\n  return (\n    <Example title=\"Input Types\">\n      <div className=\"flex w-full flex-col gap-6\">\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n          <Input\n            id=\"input-demo-password\"\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n          <Input\n            id=\"input-demo-tel\"\n            type=\"tel\"\n            placeholder=\"+1 (555) 123-4567\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n          <Input\n            id=\"input-demo-url\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n          <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n          <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n          <Input id=\"input-demo-date\" type=\"date\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n          <Input id=\"input-demo-time\" type=\"time\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n          <Input id=\"input-demo-file\" type=\"file\" />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n        <Select defaultValue=\"usd\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"usd\">USD</SelectItem>\n            <SelectItem value=\"eur\">EUR</SelectItem>\n            <SelectItem value=\"gbp\">GBP</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Button>Search</Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithNativeSelect() {\n  return (\n    <Example title=\"With Native Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n        <NativeSelect defaultValue=\"+1\">\n          <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n          <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n          <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputForm() {\n  return (\n    <Example title=\"Form\">\n      <form className=\"w-full\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n            <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n            <Input\n              id=\"form-email\"\n              type=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <FieldDescription>\n              We&apos;ll never share your email with anyone.\n            </FieldDescription>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n              <Input\n                id=\"form-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n              <Select defaultValue=\"us\">\n                <SelectTrigger id=\"form-country\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"us\">United States</SelectItem>\n                  <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                  <SelectItem value=\"ca\">Canada</SelectItem>\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n            <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-nova/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\n\nexport default function InputExample() {\n  return (\n    <ExampleWrapper>\n      <InputBasic />\n      <InputInvalid />\n      <InputWithLabel />\n      <InputWithDescription />\n      <InputDisabled />\n      <InputTypes />\n      <InputWithSelect />\n      <InputWithButton />\n      <InputWithNativeSelect />\n      <InputForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Example>\n  )\n}\n\nfunction InputInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction InputWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-email\"\n          type=\"email\"\n          placeholder=\"name@example.com\"\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n        <Input\n          id=\"input-demo-username\"\n          type=\"text\"\n          placeholder=\"Enter your username\"\n        />\n        <FieldDescription>\n          Choose a unique username for your account.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-disabled\"\n          type=\"email\"\n          placeholder=\"Email\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputTypes() {\n  return (\n    <Example title=\"Input Types\">\n      <div className=\"flex w-full flex-col gap-6\">\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n          <Input\n            id=\"input-demo-password\"\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n          <Input\n            id=\"input-demo-tel\"\n            type=\"tel\"\n            placeholder=\"+1 (555) 123-4567\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n          <Input\n            id=\"input-demo-url\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n          <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n          <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n          <Input id=\"input-demo-date\" type=\"date\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n          <Input id=\"input-demo-time\" type=\"time\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n          <Input id=\"input-demo-file\" type=\"file\" />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n        <Select defaultValue=\"usd\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"usd\">USD</SelectItem>\n              <SelectItem value=\"eur\">EUR</SelectItem>\n              <SelectItem value=\"gbp\">GBP</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Button>Search</Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithNativeSelect() {\n  return (\n    <Example title=\"With Native Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n        <NativeSelect defaultValue=\"+1\">\n          <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n          <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n          <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputForm() {\n  return (\n    <Example title=\"Form\">\n      <form className=\"w-full\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n            <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n            <Input\n              id=\"form-email\"\n              type=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <FieldDescription>\n              We&apos;ll never share your email with anyone.\n            </FieldDescription>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n              <Input\n                id=\"form-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n              <Select defaultValue=\"us\">\n                <SelectTrigger id=\"form-country\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"us\">United States</SelectItem>\n                    <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                    <SelectItem value=\"ca\">Canada</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n            <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar.json b/apps/v4/public/r/styles/radix-nova/sidebar.json
index 43aca4a0a..a01ea3f54 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-nova/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-nova/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-nova/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-0 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { useIsMobile } from \"@/registry/radix-nova/hooks/use-mobile\"\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-nova/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-nova/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-0 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/button-group-example.json b/apps/v4/public/r/styles/radix-vega/button-group-example.json
index e2edbd5a6..677bab2dd 100644
--- a/apps/v4/public/r/styles/radix-vega/button-group-example.json
+++ b/apps/v4/public/r/styles/radix-vega/button-group-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/button-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-vega/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport { Label } from \"@/registry/radix-vega/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText asChild>\n            <Label htmlFor=\"input-text\">GPU Size</Label>\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeOffIcon\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                    phosphor=\"SpeakerSlashIcon\"\n                    remixicon=\"RiVolumeMuteLine\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                    phosphor=\"UserMinusIcon\"\n                    remixicon=\"RiUserUnfollowLine\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelect() {\n  const [currency, setCurrency] = useState(\"$\")\n\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select value={currency} onValueChange={setCurrency}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectItem value=\"$\">$</SelectItem>\n              <SelectItem value=\"€\">€</SelectItem>\n              <SelectItem value=\"£\">£</SelectItem>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n                phosphor=\"MinusIcon\"\n                remixicon=\"RiSubtractLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button variant=\"outline\" asChild size=\"icon\" className=\"w-12\">\n          <span>1.2K</span>\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select defaultValue=\"hours\">\n          <SelectTrigger id=\"duration\">\n            <SelectValue placeholder=\"Select duration\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectItem value=\"hours\">Hours</SelectItem>\n            <SelectItem value=\"days\">Days</SelectItem>\n            <SelectItem value=\"weeks\">Weeks</SelectItem>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconHeadphones\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                    remixicon=\"RiMicLine\"\n                  />\n                </InputGroupAddon>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            remixicon=\"RiArrowLeftLine\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n              phosphor=\"MinusIcon\"\n              remixicon=\"RiSubtractLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n              phosphor=\"CopyIcon\"\n              remixicon=\"RiFileCopyLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n              phosphor=\"ShareIcon\"\n              remixicon=\"RiShareLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n              phosphor=\"TrashIcon\"\n              remixicon=\"RiDeleteBinLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-vega/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport { Label } from \"@/registry/radix-vega/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText asChild>\n            <Label htmlFor=\"input-text\">GPU Size</Label>\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeOffIcon\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                    phosphor=\"SpeakerSlashIcon\"\n                    remixicon=\"RiVolumeMuteLine\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                    phosphor=\"UserMinusIcon\"\n                    remixicon=\"RiUserUnfollowLine\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelect() {\n  const [currency, setCurrency] = useState(\"$\")\n\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select value={currency} onValueChange={setCurrency}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectGroup>\n                <SelectItem value=\"$\">$</SelectItem>\n                <SelectItem value=\"€\">€</SelectItem>\n                <SelectItem value=\"£\">£</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n                phosphor=\"MinusIcon\"\n                remixicon=\"RiSubtractLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button variant=\"outline\" asChild size=\"icon\" className=\"w-12\">\n          <span>1.2K</span>\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select defaultValue=\"hours\">\n          <SelectTrigger id=\"duration\">\n            <SelectValue placeholder=\"Select duration\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectGroup>\n              <SelectItem value=\"hours\">Hours</SelectItem>\n              <SelectItem value=\"days\">Days</SelectItem>\n              <SelectItem value=\"weeks\">Weeks</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconHeadphones\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                    remixicon=\"RiMicLine\"\n                  />\n                </InputGroupAddon>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            remixicon=\"RiArrowLeftLine\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n              remixicon=\"RiArrowLeftLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n              phosphor=\"MinusIcon\"\n              remixicon=\"RiSubtractLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n              phosphor=\"CopyIcon\"\n              remixicon=\"RiFileCopyLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n              phosphor=\"ShareIcon\"\n              remixicon=\"RiShareLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n              remixicon=\"RiArrowLeftRightLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n              remixicon=\"RiRefreshLine\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n              phosphor=\"TrashIcon\"\n              remixicon=\"RiDeleteBinLine\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/command-example.json b/apps/v4/public/r/styles/radix-vega/command-example.json
index 052791b1d..9ed4324e5 100644
--- a/apps/v4/public/r/styles/radix-vega/command-example.json
+++ b/apps/v4/public/r/styles/radix-vega/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-vega/ui/card\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/radix-vega/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-vega/ui/card\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/radix-vega/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"w-full p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/dialog-example.json b/apps/v4/public/r/styles/radix-vega/dialog-example.json
index d8f08e053..cce8fbd58 100644
--- a/apps/v4/public/r/styles/radix-vega/dialog-example.json
+++ b/apps/v4/public/r/styles/radix-vega/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-vega/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-vega/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-vega/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"light\">Light</SelectItem>\n                            <SelectItem value=\"dark\">Dark</SelectItem>\n                            <SelectItem value=\"system\">System</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"default\">\n                              <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                              Default\n                            </SelectItem>\n                            <SelectItem value=\"red\">\n                              <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                              Red\n                            </SelectItem>\n                            <SelectItem value=\"blue\">\n                              <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                              Blue\n                            </SelectItem>\n                            <SelectItem value=\"green\">\n                              <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                              Green\n                            </SelectItem>\n                            <SelectItem value=\"purple\">\n                              <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                              Purple\n                            </SelectItem>\n                            <SelectItem value=\"pink\">\n                              <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                              Pink\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectItem value=\"auto\">Auto</SelectItem>\n                            <SelectSeparator />\n                            {spokenLanguages.map((language) => (\n                              <SelectItem\n                                key={language.value}\n                                value={language.value}\n                              >\n                                {language.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            {voices.map((voice) => (\n                              <SelectItem key={voice.value} value={voice.value}>\n                                {voice.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                  remixicon=\"RiInformationLine\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-vega/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-vega/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-vega/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"light\">Light</SelectItem>\n                              <SelectItem value=\"dark\">Dark</SelectItem>\n                              <SelectItem value=\"system\">System</SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"default\">\n                                <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                                Default\n                              </SelectItem>\n                              <SelectItem value=\"red\">\n                                <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                                Red\n                              </SelectItem>\n                              <SelectItem value=\"blue\">\n                                <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                                Blue\n                              </SelectItem>\n                              <SelectItem value=\"green\">\n                                <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                                Green\n                              </SelectItem>\n                              <SelectItem value=\"purple\">\n                                <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                                Purple\n                              </SelectItem>\n                              <SelectItem value=\"pink\">\n                                <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                                Pink\n                              </SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              <SelectItem value=\"auto\">Auto</SelectItem>\n                            </SelectGroup>\n                            <SelectSeparator />\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                  remixicon=\"RiInformationLine\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/field-example.json b/apps/v4/public/r/styles/radix-vega/field-example.json
index f6f03439c..31eb9d394 100644
--- a/apps/v4/public/r/styles/radix-vega/field-example.json
+++ b/apps/v4/public/r/styles/radix-vega/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-vega/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-vega/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-vega/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { Slider } from \"@/registry/radix-vega/ui/slider\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"us\">United States</SelectItem>\n              <SelectItem value=\"uk\">United Kingdom</SelectItem>\n              <SelectItem value=\"ca\">Canada</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"utc\">UTC</SelectItem>\n              <SelectItem value=\"est\">Eastern Time</SelectItem>\n              <SelectItem value=\"pst\">Pacific Time</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-vega/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-vega/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-vega/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { Slider } from \"@/registry/radix-vega/ui/slider\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"us\">United States</SelectItem>\n                <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                <SelectItem value=\"ca\">Canada</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"utc\">UTC</SelectItem>\n                <SelectItem value=\"est\">Eastern Time</SelectItem>\n                <SelectItem value=\"pst\">Pacific Time</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/input-example.json b/apps/v4/public/r/styles/radix-vega/input-example.json
index 3ba1fda66..94829ed4c 100644
--- a/apps/v4/public/r/styles/radix-vega/input-example.json
+++ b/apps/v4/public/r/styles/radix-vega/input-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/input-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-vega/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\n\nexport default function InputExample() {\n  return (\n    <ExampleWrapper>\n      <InputBasic />\n      <InputInvalid />\n      <InputWithLabel />\n      <InputWithDescription />\n      <InputDisabled />\n      <InputTypes />\n      <InputWithSelect />\n      <InputWithButton />\n      <InputWithNativeSelect />\n      <InputForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Example>\n  )\n}\n\nfunction InputInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction InputWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-email\"\n          type=\"email\"\n          placeholder=\"name@example.com\"\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n        <Input\n          id=\"input-demo-username\"\n          type=\"text\"\n          placeholder=\"Enter your username\"\n        />\n        <FieldDescription>\n          Choose a unique username for your account.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-disabled\"\n          type=\"email\"\n          placeholder=\"Email\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputTypes() {\n  return (\n    <Example title=\"Input Types\">\n      <div className=\"flex w-full flex-col gap-6\">\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n          <Input\n            id=\"input-demo-password\"\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n          <Input\n            id=\"input-demo-tel\"\n            type=\"tel\"\n            placeholder=\"+1 (555) 123-4567\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n          <Input\n            id=\"input-demo-url\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n          <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n          <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n          <Input id=\"input-demo-date\" type=\"date\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n          <Input id=\"input-demo-time\" type=\"time\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n          <Input id=\"input-demo-file\" type=\"file\" />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n        <Select defaultValue=\"usd\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"usd\">USD</SelectItem>\n            <SelectItem value=\"eur\">EUR</SelectItem>\n            <SelectItem value=\"gbp\">GBP</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Button>Search</Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithNativeSelect() {\n  return (\n    <Example title=\"With Native Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n        <NativeSelect defaultValue=\"+1\">\n          <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n          <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n          <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputForm() {\n  return (\n    <Example title=\"Form\">\n      <form className=\"w-full\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n            <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n            <Input\n              id=\"form-email\"\n              type=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <FieldDescription>\n              We&apos;ll never share your email with anyone.\n            </FieldDescription>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n              <Input\n                id=\"form-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n              <Select defaultValue=\"us\">\n                <SelectTrigger id=\"form-country\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"us\">United States</SelectItem>\n                  <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                  <SelectItem value=\"ca\">Canada</SelectItem>\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n            <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-vega/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\n\nexport default function InputExample() {\n  return (\n    <ExampleWrapper>\n      <InputBasic />\n      <InputInvalid />\n      <InputWithLabel />\n      <InputWithDescription />\n      <InputDisabled />\n      <InputTypes />\n      <InputWithSelect />\n      <InputWithButton />\n      <InputWithNativeSelect />\n      <InputForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Example>\n  )\n}\n\nfunction InputInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction InputWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-email\"\n          type=\"email\"\n          placeholder=\"name@example.com\"\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n        <Input\n          id=\"input-demo-username\"\n          type=\"text\"\n          placeholder=\"Enter your username\"\n        />\n        <FieldDescription>\n          Choose a unique username for your account.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-disabled\"\n          type=\"email\"\n          placeholder=\"Email\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputTypes() {\n  return (\n    <Example title=\"Input Types\">\n      <div className=\"flex w-full flex-col gap-6\">\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n          <Input\n            id=\"input-demo-password\"\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n          <Input\n            id=\"input-demo-tel\"\n            type=\"tel\"\n            placeholder=\"+1 (555) 123-4567\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n          <Input\n            id=\"input-demo-url\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n          <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n          <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n          <Input id=\"input-demo-date\" type=\"date\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n          <Input id=\"input-demo-time\" type=\"time\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n          <Input id=\"input-demo-file\" type=\"file\" />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n        <Select defaultValue=\"usd\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"usd\">USD</SelectItem>\n              <SelectItem value=\"eur\">EUR</SelectItem>\n              <SelectItem value=\"gbp\">GBP</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Button>Search</Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithNativeSelect() {\n  return (\n    <Example title=\"With Native Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n        <NativeSelect defaultValue=\"+1\">\n          <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n          <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n          <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputForm() {\n  return (\n    <Example title=\"Form\">\n      <form className=\"w-full\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n            <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n            <Input\n              id=\"form-email\"\n              type=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <FieldDescription>\n              We&apos;ll never share your email with anyone.\n            </FieldDescription>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n              <Input\n                id=\"form-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n              <Select defaultValue=\"us\">\n                <SelectTrigger id=\"form-country\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"us\">United States</SelectItem>\n                    <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                    <SelectItem value=\"ca\">Canada</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n            <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar.json b/apps/v4/public/r/styles/radix-vega/sidebar.json
index 52d53ab18..54f6f7e9c 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-vega/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-vega/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-vega/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-1 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { useIsMobile } from \"@/registry/radix-vega/hooks/use-mobile\"\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-vega/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-vega/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-1 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/registry/bases/base/examples/command-example.tsx b/apps/v4/registry/bases/base/examples/command-example.tsx
index 6d972981e..438a3340c 100644
--- a/apps/v4/registry/bases/base/examples/command-example.tsx
+++ b/apps/v4/registry/bases/base/examples/command-example.tsx
@@ -36,7 +36,7 @@ export default function CommandExample() {
 function CommandInline() {
   return (
     <Example title="Inline">
-      <Card className="p-0">
+      <Card className="w-full p-0">
         <CardContent className="p-0">
           <Command>
             <CommandInput placeholder="Type a command or search..." />
diff --git a/apps/v4/registry/bases/base/examples/input-example.tsx b/apps/v4/registry/bases/base/examples/input-example.tsx
index 328c16da8..8bc098cf5 100644
--- a/apps/v4/registry/bases/base/examples/input-example.tsx
+++ b/apps/v4/registry/bases/base/examples/input-example.tsx
@@ -17,6 +17,7 @@ import {
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -167,9 +168,11 @@ function InputWithSelect() {
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="usd">USD</SelectItem>
-            <SelectItem value="eur">EUR</SelectItem>
-            <SelectItem value="gbp">GBP</SelectItem>
+            <SelectGroup>
+              <SelectItem value="usd">USD</SelectItem>
+              <SelectItem value="eur">EUR</SelectItem>
+              <SelectItem value="gbp">GBP</SelectItem>
+            </SelectGroup>
           </SelectContent>
         </Select>
       </div>
@@ -239,9 +242,11 @@ function InputForm() {
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="us">United States</SelectItem>
-                  <SelectItem value="uk">United Kingdom</SelectItem>
-                  <SelectItem value="ca">Canada</SelectItem>
+                  <SelectGroup>
+                    <SelectItem value="us">United States</SelectItem>
+                    <SelectItem value="uk">United Kingdom</SelectItem>
+                    <SelectItem value="ca">Canada</SelectItem>
+                  </SelectGroup>
                 </SelectContent>
               </Select>
             </Field>
diff --git a/apps/v4/registry/bases/base/ui/sidebar.tsx b/apps/v4/registry/bases/base/ui/sidebar.tsx
index d0f0d6d07..0c21f7894 100644
--- a/apps/v4/registry/bases/base/ui/sidebar.tsx
+++ b/apps/v4/registry/bases/base/ui/sidebar.tsx
@@ -5,6 +5,7 @@ import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
 
+import { useIsMobile } from "@/registry/bases/base/hooks/use-mobile"
 import { cn } from "@/registry/bases/base/lib/utils"
 import { Button } from "@/registry/bases/base/ui/button"
 import { Input } from "@/registry/bases/base/ui/input"
@@ -22,7 +23,6 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/registry/bases/base/ui/tooltip"
-import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
 import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
diff --git a/apps/v4/registry/bases/radix/examples/button-group-example.tsx b/apps/v4/registry/bases/radix/examples/button-group-example.tsx
index 41c4c7163..e6abc4a14 100644
--- a/apps/v4/registry/bases/radix/examples/button-group-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/button-group-example.tsx
@@ -30,6 +30,7 @@ import { Label } from "@/registry/bases/radix/ui/label"
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -251,9 +252,11 @@ function ButtonGroupWithSelect() {
               <SelectValue />
             </SelectTrigger>
             <SelectContent align="start">
-              <SelectItem value="$">$</SelectItem>
-              <SelectItem value="€">€</SelectItem>
-              <SelectItem value="£">£</SelectItem>
+              <SelectGroup>
+                <SelectItem value="$">$</SelectItem>
+                <SelectItem value="€">€</SelectItem>
+                <SelectItem value="£">£</SelectItem>
+              </SelectGroup>
             </SelectContent>
           </Select>
           <Input placeholder="Enter amount to send" />
@@ -410,9 +413,11 @@ function ButtonGroupWithSelectAndInput() {
             <SelectValue placeholder="Select duration" />
           </SelectTrigger>
           <SelectContent align="start">
-            <SelectItem value="hours">Hours</SelectItem>
-            <SelectItem value="days">Days</SelectItem>
-            <SelectItem value="weeks">Weeks</SelectItem>
+            <SelectGroup>
+              <SelectItem value="hours">Hours</SelectItem>
+              <SelectItem value="days">Days</SelectItem>
+              <SelectItem value="weeks">Weeks</SelectItem>
+            </SelectGroup>
           </SelectContent>
         </Select>
         <Input />
diff --git a/apps/v4/registry/bases/radix/examples/command-example.tsx b/apps/v4/registry/bases/radix/examples/command-example.tsx
index d5e486a14..cfa26cbc6 100644
--- a/apps/v4/registry/bases/radix/examples/command-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/command-example.tsx
@@ -36,7 +36,7 @@ export default function CommandExample() {
 function CommandInline() {
   return (
     <Example title="Inline">
-      <Card className="p-0">
+      <Card className="w-full p-0">
         <CardContent className="p-0">
           <Command>
             <CommandInput placeholder="Type a command or search..." />
diff --git a/apps/v4/registry/bases/radix/examples/dialog-example.tsx b/apps/v4/registry/bases/radix/examples/dialog-example.tsx
index 19711e9ae..04c6fdd15 100644
--- a/apps/v4/registry/bases/radix/examples/dialog-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/dialog-example.tsx
@@ -43,6 +43,7 @@ import {
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectSeparator,
   SelectTrigger,
@@ -308,9 +309,11 @@ function DialogChatSettings() {
                             <SelectValue placeholder="Select" />
                           </SelectTrigger>
                           <SelectContent align="end">
-                            <SelectItem value="light">Light</SelectItem>
-                            <SelectItem value="dark">Dark</SelectItem>
-                            <SelectItem value="system">System</SelectItem>
+                            <SelectGroup>
+                              <SelectItem value="light">Light</SelectItem>
+                              <SelectItem value="dark">Dark</SelectItem>
+                              <SelectItem value="system">System</SelectItem>
+                            </SelectGroup>
                           </SelectContent>
                         </Select>
                       </Field>
@@ -327,30 +330,32 @@ function DialogChatSettings() {
                             <SelectValue placeholder="Select" />
                           </SelectTrigger>
                           <SelectContent align="end">
-                            <SelectItem value="default">
-                              <div className="size-3 rounded-full bg-neutral-500 dark:bg-neutral-400" />
-                              Default
-                            </SelectItem>
-                            <SelectItem value="red">
-                              <div className="size-3 rounded-full bg-red-500 dark:bg-red-400" />
-                              Red
-                            </SelectItem>
-                            <SelectItem value="blue">
-                              <div className="size-3 rounded-full bg-blue-500 dark:bg-blue-400" />
-                              Blue
-                            </SelectItem>
-                            <SelectItem value="green">
-                              <div className="size-3 rounded-full bg-green-500 dark:bg-green-400" />
-                              Green
-                            </SelectItem>
-                            <SelectItem value="purple">
-                              <div className="size-3 rounded-full bg-purple-500 dark:bg-purple-400" />
-                              Purple
-                            </SelectItem>
-                            <SelectItem value="pink">
-                              <div className="size-3 rounded-full bg-pink-500 dark:bg-pink-400" />
-                              Pink
-                            </SelectItem>
+                            <SelectGroup>
+                              <SelectItem value="default">
+                                <div className="size-3 rounded-full bg-neutral-500 dark:bg-neutral-400" />
+                                Default
+                              </SelectItem>
+                              <SelectItem value="red">
+                                <div className="size-3 rounded-full bg-red-500 dark:bg-red-400" />
+                                Red
+                              </SelectItem>
+                              <SelectItem value="blue">
+                                <div className="size-3 rounded-full bg-blue-500 dark:bg-blue-400" />
+                                Blue
+                              </SelectItem>
+                              <SelectItem value="green">
+                                <div className="size-3 rounded-full bg-green-500 dark:bg-green-400" />
+                                Green
+                              </SelectItem>
+                              <SelectItem value="purple">
+                                <div className="size-3 rounded-full bg-purple-500 dark:bg-purple-400" />
+                                Purple
+                              </SelectItem>
+                              <SelectItem value="pink">
+                                <div className="size-3 rounded-full bg-pink-500 dark:bg-pink-400" />
+                                Pink
+                              </SelectItem>
+                            </SelectGroup>
                           </SelectContent>
                         </Select>
                       </Field>
@@ -374,16 +379,20 @@ function DialogChatSettings() {
                             <SelectValue placeholder="Select" />
                           </SelectTrigger>
                           <SelectContent align="end" position="item-aligned">
-                            <SelectItem value="auto">Auto</SelectItem>
+                            <SelectGroup>
+                              <SelectItem value="auto">Auto</SelectItem>
+                            </SelectGroup>
                             <SelectSeparator />
-                            {spokenLanguages.map((language) => (
-                              <SelectItem
-                                key={language.value}
-                                value={language.value}
-                              >
-                                {language.label}
-                              </SelectItem>
-                            ))}
+                            <SelectGroup>
+                              {spokenLanguages.map((language) => (
+                                <SelectItem
+                                  key={language.value}
+                                  value={language.value}
+                                >
+                                  {language.label}
+                                </SelectItem>
+                              ))}
+                            </SelectGroup>
                           </SelectContent>
                         </Select>
                       </Field>
@@ -395,11 +404,16 @@ function DialogChatSettings() {
                             <SelectValue placeholder="Select" />
                           </SelectTrigger>
                           <SelectContent align="end" position="item-aligned">
-                            {voices.map((voice) => (
-                              <SelectItem key={voice.value} value={voice.value}>
-                                {voice.label}
-                              </SelectItem>
-                            ))}
+                            <SelectGroup>
+                              {voices.map((voice) => (
+                                <SelectItem
+                                  key={voice.value}
+                                  value={voice.value}
+                                >
+                                  {voice.label}
+                                </SelectItem>
+                              ))}
+                            </SelectGroup>
                           </SelectContent>
                         </Select>
                       </Field>
diff --git a/apps/v4/registry/bases/radix/examples/field-example.tsx b/apps/v4/registry/bases/radix/examples/field-example.tsx
index fef86bff1..60453e9e8 100644
--- a/apps/v4/registry/bases/radix/examples/field-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/field-example.tsx
@@ -211,9 +211,11 @@ function SelectFields() {
               <SelectValue placeholder="Choose an option" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="option1">Option 1</SelectItem>
-              <SelectItem value="option2">Option 2</SelectItem>
-              <SelectItem value="option3">Option 3</SelectItem>
+              <SelectGroup>
+                <SelectItem value="option1">Option 1</SelectItem>
+                <SelectItem value="option2">Option 2</SelectItem>
+                <SelectItem value="option3">Option 3</SelectItem>
+              </SelectGroup>
             </SelectContent>
           </Select>
         </Field>
@@ -224,9 +226,11 @@ function SelectFields() {
               <SelectValue placeholder="Select your country" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="us">United States</SelectItem>
-              <SelectItem value="uk">United Kingdom</SelectItem>
-              <SelectItem value="ca">Canada</SelectItem>
+              <SelectGroup>
+                <SelectItem value="us">United States</SelectItem>
+                <SelectItem value="uk">United Kingdom</SelectItem>
+                <SelectItem value="ca">Canada</SelectItem>
+              </SelectGroup>
             </SelectContent>
           </Select>
           <FieldDescription>
@@ -243,9 +247,11 @@ function SelectFields() {
               <SelectValue placeholder="Select timezone" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="utc">UTC</SelectItem>
-              <SelectItem value="est">Eastern Time</SelectItem>
-              <SelectItem value="pst">Pacific Time</SelectItem>
+              <SelectGroup>
+                <SelectItem value="utc">UTC</SelectItem>
+                <SelectItem value="est">Eastern Time</SelectItem>
+                <SelectItem value="pst">Pacific Time</SelectItem>
+              </SelectGroup>
             </SelectContent>
           </Select>
         </Field>
@@ -256,9 +262,11 @@ function SelectFields() {
               <SelectValue placeholder="This field has an error" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="option1">Option 1</SelectItem>
-              <SelectItem value="option2">Option 2</SelectItem>
-              <SelectItem value="option3">Option 3</SelectItem>
+              <SelectGroup>
+                <SelectItem value="option1">Option 1</SelectItem>
+                <SelectItem value="option2">Option 2</SelectItem>
+                <SelectItem value="option3">Option 3</SelectItem>
+              </SelectGroup>
             </SelectContent>
           </Select>
           <FieldDescription>
@@ -274,9 +282,11 @@ function SelectFields() {
               <SelectValue placeholder="Cannot select" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="option1">Option 1</SelectItem>
-              <SelectItem value="option2">Option 2</SelectItem>
-              <SelectItem value="option3">Option 3</SelectItem>
+              <SelectGroup>
+                <SelectItem value="option1">Option 1</SelectItem>
+                <SelectItem value="option2">Option 2</SelectItem>
+                <SelectItem value="option3">Option 3</SelectItem>
+              </SelectGroup>
             </SelectContent>
           </Select>
           <FieldDescription>This field is currently disabled.</FieldDescription>
diff --git a/apps/v4/registry/bases/radix/examples/input-example.tsx b/apps/v4/registry/bases/radix/examples/input-example.tsx
index 3f766195e..63789c8f8 100644
--- a/apps/v4/registry/bases/radix/examples/input-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/input-example.tsx
@@ -17,6 +17,7 @@ import {
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -167,9 +168,11 @@ function InputWithSelect() {
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="usd">USD</SelectItem>
-            <SelectItem value="eur">EUR</SelectItem>
-            <SelectItem value="gbp">GBP</SelectItem>
+            <SelectGroup>
+              <SelectItem value="usd">USD</SelectItem>
+              <SelectItem value="eur">EUR</SelectItem>
+              <SelectItem value="gbp">GBP</SelectItem>
+            </SelectGroup>
           </SelectContent>
         </Select>
       </div>
@@ -239,9 +242,11 @@ function InputForm() {
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="us">United States</SelectItem>
-                  <SelectItem value="uk">United Kingdom</SelectItem>
-                  <SelectItem value="ca">Canada</SelectItem>
+                  <SelectGroup>
+                    <SelectItem value="us">United States</SelectItem>
+                    <SelectItem value="uk">United Kingdom</SelectItem>
+                    <SelectItem value="ca">Canada</SelectItem>
+                  </SelectGroup>
                 </SelectContent>
               </Select>
             </Field>
diff --git a/apps/v4/registry/bases/radix/ui/sidebar.tsx b/apps/v4/registry/bases/radix/ui/sidebar.tsx
index 3f04ec98a..d1db79582 100644
--- a/apps/v4/registry/bases/radix/ui/sidebar.tsx
+++ b/apps/v4/registry/bases/radix/ui/sidebar.tsx
@@ -4,6 +4,7 @@ import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
 
+import { useIsMobile } from "@/registry/bases/radix/hooks/use-mobile"
 import { cn } from "@/registry/bases/radix/lib/utils"
 import { Button } from "@/registry/bases/radix/ui/button"
 import { Input } from "@/registry/bases/radix/ui/input"
@@ -21,7 +22,6 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/registry/bases/radix/ui/tooltip"
-import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
 import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
diff --git a/apps/v4/registry/styles/style-maia.css b/apps/v4/registry/styles/style-maia.css
index 99057e78f..4bee3c2a1 100644
--- a/apps/v4/registry/styles/style-maia.css
+++ b/apps/v4/registry/styles/style-maia.css
@@ -478,7 +478,7 @@
   }
 
   .cn-drawer-content {
-    @apply before:bg-background relative flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm;
+    @apply before:bg-background before:border-border relative flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm;
   }
 
   .cn-drawer-handle {
@@ -1072,11 +1072,11 @@
   }
 
   .cn-sidebar-header {
-    @apply gap-2 p-2;
+    @apply gap-2 p-2 [--radius:var(--radius-xl)];
   }
 
   .cn-sidebar-content {
-    @apply no-scrollbar gap-2;
+    @apply no-scrollbar gap-2 [--radius:var(--radius-xl)];
   }
 
   .cn-sidebar-footer {
@@ -1108,7 +1108,7 @@
   }
 
   .cn-sidebar-menu-button {
-    @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-lg p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium;
+    @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-lg px-3 py-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium;
   }
 
   .cn-sidebar-menu-button-variant-default {
@@ -1128,7 +1128,7 @@
   }
 
   .cn-sidebar-menu-button-size-lg {
-    @apply h-12 text-sm group-data-[collapsible=icon]:p-0!;
+    @apply h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!;
   }
 
   .cn-sidebar-menu-action {
diff --git a/apps/v4/registry/styles/style-mira.css b/apps/v4/registry/styles/style-mira.css
index ec513b5df..6a5575c81 100644
--- a/apps/v4/registry/styles/style-mira.css
+++ b/apps/v4/registry/styles/style-mira.css
@@ -478,7 +478,7 @@
   }
 
   .cn-drawer-content {
-    @apply before:bg-background relative flex h-auto flex-col bg-transparent p-2 text-xs/relaxed before:absolute before:inset-2 before:-z-10 before:rounded-xl data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm;
+    @apply before:bg-background before:border-border relative flex h-auto flex-col bg-transparent p-2 text-xs/relaxed before:absolute before:inset-2 before:-z-10 before:rounded-xl before:border data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm;
   }
 
   .cn-drawer-handle {
diff --git a/apps/v4/scripts/build-test-app.mts b/apps/v4/scripts/build-test-app.mts
new file mode 100644
index 000000000..8e2db8072
--- /dev/null
+++ b/apps/v4/scripts/build-test-app.mts
@@ -0,0 +1,415 @@
+/**
+ * Build Test Apps Script
+ *
+ * This script populates the ui-test-apps repository with components and examples
+ * from the shadcn/ui registry for testing different style configurations.
+ *
+ * Prerequisites:
+ *   1. Clone the test apps repo: git clone https://github.com/shadcn-ui/ui-test-apps
+ *   2. Place it at ../../../ui-test-apps (relative to apps/v4) or set TEST_APPS_PATH
+ *
+ * Usage:
+ *   pnpm test:apps [STYLE]
+ *
+ * Examples:
+ *   pnpm test:apps nova      # Build with nova style
+ *   pnpm test:apps maia      # Build with maia style
+ *   pnpm test:apps vega      # Build with vega style
+ *
+ * Available styles: vega, nova, maia, lyra, mira
+ *
+ * What it does:
+ *   1. Copies UI components to next-radix/components/ui and next-base/components/ui
+ *   2. Copies hooks to next-radix/hooks and next-base/hooks
+ *   3. Transforms canonical CSS classes (cn-*) to actual Tailwind classes
+ *   4. Transforms IconPlaceholder to lucide-react icons
+ *   5. Generates example pages at app/{example}/page.tsx
+ *   6. Generates block pages at app/blocks/{block}/page.tsx
+ *   7. Updates the STYLE constant in layout.tsx
+ *
+ * After running:
+ *   cd ../../../ui-test-apps
+ *   pnpm install
+ *   pnpm dev
+ *
+ * Then visit:
+ *   - http://localhost:3000 (next-radix)
+ *   - http://localhost:3001 (next-base)
+ */
+
+import { promises as fs } from "fs"
+import path from "path"
+import { rimraf } from "rimraf"
+import { registrySchema } from "shadcn/schema"
+import {
+  createStyleMap,
+  transformIcons,
+  transformStyle,
+} from "shadcn/utils"
+import { Project, ScriptKind } from "ts-morph"
+
+import { BASES, type Base } from "@/registry/bases"
+import { STYLES } from "@/registry/styles"
+
+// Default path to test apps repo.
+const DEFAULT_TEST_APPS_PATH = "../../../ui-test-apps"
+
+// Parse CLI arguments.
+const args = process.argv.slice(2)
+const styleName = args[0]
+const testAppsPath =
+  args[1] || process.env.TEST_APPS_PATH || DEFAULT_TEST_APPS_PATH
+
+if (!styleName) {
+  console.error("❌ Usage: pnpm test:apps [STYLE] [TEST_APPS_PATH]")
+  console.error("   Example: pnpm test:apps nova")
+  console.error("")
+  console.error(`   Available styles: ${STYLES.map((s) => s.name).join(", ")}`)
+  console.error("")
+  console.error(`   Default test apps path: ${DEFAULT_TEST_APPS_PATH}`)
+  console.error(`   Override with: pnpm test:apps nova /path/to/ui-test-apps`)
+  console.error(`   Or set TEST_APPS_PATH environment variable`)
+  process.exit(1)
+}
+
+// Validate style exists.
+const style = STYLES.find((s) => s.name === styleName)
+if (!style) {
+  console.error(`❌ Unknown style: "${styleName}"`)
+  console.error(`   Available styles: ${STYLES.map((s) => s.name).join(", ")}`)
+  process.exit(1)
+}
+
+// Resolve test apps path.
+const resolvedTestAppsPath = path.resolve(process.cwd(), testAppsPath)
+
+// Check if test apps path exists.
+try {
+  await fs.access(resolvedTestAppsPath)
+} catch {
+  console.error(`❌ Test apps path not found: ${resolvedTestAppsPath}`)
+  process.exit(1)
+}
+
+console.log(`🏗️ Building test apps with style "${styleName}"...`)
+console.log(`   Test apps path: ${resolvedTestAppsPath}`)
+
+// Create ts-morph project for icon transformation.
+const project = new Project({
+  useInMemoryFileSystem: true,
+})
+
+try {
+  // Build bases with the selected style.
+  console.log("\n📦 Building bases...")
+  const builtRegistries = await buildBasesWithStyle(Array.from(BASES), style)
+
+  // Process each base.
+  for (const { base, registryItems, styleMap } of builtRegistries) {
+    const testAppDir = path.join(resolvedTestAppsPath, `next-${base.name}`)
+
+    // Check if test app exists.
+    try {
+      await fs.access(testAppDir)
+    } catch {
+      console.log(`   ⚠️ ${testAppDir} not found, skipping.`)
+      continue
+    }
+
+    console.log(`\n📋 Processing ${base.name}...`)
+
+    // Clear existing generated content.
+    await rimraf(path.join(testAppDir, "components/ui"))
+    await rimraf(path.join(testAppDir, "hooks"))
+
+    // Clear example routes (directories in app/).
+    const appDir = path.join(testAppDir, "app")
+    const appContents = await fs.readdir(appDir)
+    for (const item of appContents) {
+      const itemPath = path.join(appDir, item)
+      const stat = await fs.stat(itemPath)
+      if (stat.isDirectory()) {
+        await rimraf(itemPath)
+      }
+    }
+
+    // Copy UI components.
+    console.log(`   📁 Copying UI components...`)
+    await copyTransformedFiles(
+      path.join(process.cwd(), `registry/bases/${base.name}/ui`),
+      path.join(testAppDir, "components/ui"),
+      base,
+      styleMap
+    )
+
+    // Copy hooks.
+    console.log(`   📁 Copying hooks...`)
+    await copyTransformedFiles(
+      path.join(process.cwd(), `registry/bases/${base.name}/hooks`),
+      path.join(testAppDir, "hooks"),
+      base,
+      styleMap
+    )
+
+    // Generate example pages.
+    console.log(`   📄 Generating example pages...`)
+    const examplesDir = path.join(
+      process.cwd(),
+      `registry/bases/${base.name}/examples`
+    )
+    let exampleFiles: string[] = []
+    try {
+      exampleFiles = (await fs.readdir(examplesDir)).filter(
+        (f) =>
+          f.endsWith(".tsx") &&
+          !f.startsWith("_") &&
+          f !== "component-example.tsx" // Skip the generic component example.
+      )
+    } catch {
+      console.log(`   ⚠️ No examples directory found for ${base.name}.`)
+    }
+
+    const generatedExamples: string[] = []
+
+    for (const exampleFile of exampleFiles) {
+      // Extract example name: "accordion-example.tsx" -> "accordion".
+      const exampleName = exampleFile
+        .replace("-example.tsx", "")
+        .replace(".tsx", "")
+      const sourcePath = path.join(examplesDir, exampleFile)
+      const targetDir = path.join(appDir, exampleName)
+      const targetPath = path.join(targetDir, "page.tsx")
+
+      // Read and transform the example file.
+      let content = await fs.readFile(sourcePath, "utf-8")
+
+      // Apply style transformation.
+      content = await transformStyle(content, { styleMap })
+
+      // Transform icons using shadcn transformer.
+      content = await applyIconTransform(content, exampleFile)
+
+      // Rewrite imports.
+      content = rewriteImports(content, base.name)
+
+      // Transform the default export function name to Page.
+      content = transformDefaultExport(content)
+
+      // Write the transformed example as a page.
+      await fs.mkdir(targetDir, { recursive: true })
+      await fs.writeFile(targetPath, content)
+      generatedExamples.push(exampleName)
+    }
+
+    console.log(`   ✅ Generated ${generatedExamples.length} example pages`)
+
+    // Generate block pages.
+    console.log(`   📄 Generating block pages...`)
+    const blocksDir = path.join(
+      process.cwd(),
+      `registry/bases/${base.name}/blocks`
+    )
+    let blockFiles: string[] = []
+    try {
+      blockFiles = (await fs.readdir(blocksDir)).filter(
+        (f) => f.endsWith(".tsx") && !f.startsWith("_")
+      )
+    } catch {
+      console.log(`   ⚠️ No blocks directory found for ${base.name}.`)
+    }
+
+    const generatedBlocks: string[] = []
+
+    for (const blockFile of blockFiles) {
+      // Extract block name: "chatgpt.tsx" -> "chatgpt".
+      const blockName = blockFile.replace(".tsx", "")
+      const sourcePath = path.join(blocksDir, blockFile)
+      const targetDir = path.join(appDir, `blocks/${blockName}`)
+      const targetPath = path.join(targetDir, "page.tsx")
+
+      // Read and transform the block file.
+      let content = await fs.readFile(sourcePath, "utf-8")
+
+      // Apply style transformation.
+      content = await transformStyle(content, { styleMap })
+
+      // Transform icons using shadcn transformer.
+      content = await applyIconTransform(content, blockFile)
+
+      // Rewrite imports.
+      content = rewriteImports(content, base.name)
+
+      // Transform the default export function name to Page.
+      content = transformDefaultExport(content)
+
+      // Write the transformed block as a page.
+      await fs.mkdir(targetDir, { recursive: true })
+      await fs.writeFile(targetPath, content)
+      generatedBlocks.push(blockName)
+    }
+
+    console.log(`   ✅ Generated ${generatedBlocks.length} block pages`)
+
+    // Update STYLE constant in layout.tsx.
+    await updateLayoutStyle(testAppDir, styleName)
+  }
+
+  console.log(`\n✅ Test apps built successfully!`)
+  console.log(`\n📌 Next steps:`)
+  console.log(`   cd ${resolvedTestAppsPath}`)
+  console.log(`   pnpm install`)
+  console.log(`   pnpm dev`)
+} catch (error) {
+  console.error("\n❌ Build failed:", error)
+  process.exit(1)
+}
+
+async function buildBasesWithStyle(bases: Base[], style: (typeof STYLES)[0]) {
+  // Load style map.
+  const styleContent = await fs.readFile(
+    path.join(process.cwd(), `registry/styles/style-${style.name}.css`),
+    "utf8"
+  )
+  const styleMap = createStyleMap(styleContent)
+
+  // Load registries for each base.
+  const results: Array<{
+    base: Base
+    registryItems: Array<{ name: string; files?: Array<{ path: string }> }>
+    styleMap: Record<string, string>
+  }> = []
+
+  for (const base of bases) {
+    const { registry: baseRegistry } = await import(
+      `../registry/bases/${base.name}/registry.ts`
+    )
+    const result = registrySchema.safeParse(baseRegistry)
+    if (!result.success) {
+      console.error(`❌ Registry validation failed for ${base.name}:`)
+      console.error(result.error.format())
+      throw new Error(`Invalid registry schema for ${base.name}`)
+    }
+    const registryItems = result.data.items.filter(
+      (item) => item.type !== "registry:internal"
+    )
+    results.push({ base, registryItems, styleMap })
+    console.log(`   ✅ Loaded ${base.name} registry`)
+  }
+
+  return results
+}
+
+async function copyTransformedFiles(
+  sourceDir: string,
+  targetDir: string,
+  base: Base,
+  styleMap: Record<string, string>
+) {
+  try {
+    await fs.access(sourceDir)
+  } catch {
+    return
+  }
+
+  await fs.mkdir(targetDir, { recursive: true })
+
+  const files = await fs.readdir(sourceDir)
+  for (const file of files) {
+    // Skip _registry.ts files.
+    if (file.startsWith("_")) {
+      continue
+    }
+
+    const sourcePath = path.join(sourceDir, file)
+    const targetPath = path.join(targetDir, file)
+    const stat = await fs.stat(sourcePath)
+
+    if (stat.isDirectory()) {
+      await copyTransformedFiles(sourcePath, targetPath, base, styleMap)
+    } else {
+      let content = await fs.readFile(sourcePath, "utf-8")
+
+      // Apply style transformation for .tsx and .ts files.
+      if (file.endsWith(".tsx") || file.endsWith(".ts")) {
+        content = await transformStyle(content, { styleMap })
+        content = await applyIconTransform(content, file)
+        content = rewriteImports(content, base.name)
+      }
+
+      await fs.writeFile(targetPath, content)
+    }
+  }
+}
+
+async function applyIconTransform(content: string, filename: string) {
+  const sourceFile = project.createSourceFile(filename, content, {
+    scriptKind: ScriptKind.TSX,
+    overwrite: true,
+  })
+
+  // Create a minimal config with just iconLibrary.
+  const config = { iconLibrary: "lucide" } as { iconLibrary: string }
+
+  await transformIcons({
+    sourceFile,
+    config,
+    filename,
+    raw: content,
+  })
+
+  return sourceFile.getText()
+}
+
+function rewriteImports(content: string, baseName: string) {
+  // Rewrite base registry imports to test app paths.
+  content = content.replace(
+    new RegExp(`@/registry/bases/${baseName}/ui/`, "g"),
+    "@/components/ui/"
+  )
+  content = content.replace(
+    new RegExp(`@/registry/bases/${baseName}/lib/`, "g"),
+    "@/lib/"
+  )
+  content = content.replace(
+    new RegExp(`@/registry/bases/${baseName}/hooks/`, "g"),
+    "@/hooks/"
+  )
+  content = content.replace(
+    new RegExp(`@/registry/bases/${baseName}/components/`, "g"),
+    "@/components/"
+  )
+
+  // Remove imports from @/app (like IconPlaceholder).
+  content = content.replace(/^import.*from\s+["']@\/app\/.*["'].*\n/gm, "")
+
+  return content
+}
+
+function transformDefaultExport(content: string) {
+  // Replace "export default function XxxExample" with "export default function Page".
+  content = content.replace(
+    /export\s+default\s+function\s+\w+\s*\(/,
+    "export default function Page("
+  )
+
+  return content
+}
+
+async function updateLayoutStyle(testAppDir: string, styleName: string) {
+  const layoutPath = path.join(testAppDir, "app/layout.tsx")
+
+  try {
+    let content = await fs.readFile(layoutPath, "utf-8")
+
+    // Replace the STYLE constant value.
+    content = content.replace(
+      /const STYLE = ["'][^"']*["']/,
+      `const STYLE = "${styleName}"`
+    )
+
+    await fs.writeFile(layoutPath, content)
+    console.log(`   ✅ Updated STYLE in layout.tsx to "${styleName}"`)
+  } catch {
+    console.log(`   ⚠️ Could not update layout.tsx`)
+  }
+}
diff --git a/package.json b/package.json
index 0d208127b..e8f79874d 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,8 @@
     "pub:release": "cd packages/shadcn && pnpm pub:release",
     "test:dev": "turbo run test --filter=!shadcn-ui --force",
     "test": "start-server-and-test v4:dev http://localhost:4000 test:dev",
-    "validate:registries": "pnpm --filter=v4 validate:registries"
+    "validate:registries": "pnpm --filter=v4 validate:registries",
+    "test:apps": "pnpm --filter=v4 test:apps"
   },
   "packageManager": "pnpm@9.0.6",
   "dependencies": {
diff --git a/packages/shadcn/src/styles/transform-style-map.test.ts b/packages/shadcn/src/styles/transform-style-map.test.ts
index a7b7a56af..01650dcbb 100644
--- a/packages/shadcn/src/styles/transform-style-map.test.ts
+++ b/packages/shadcn/src/styles/transform-style-map.test.ts
@@ -794,6 +794,186 @@ function Foo({ className, ...props }: { className?: string }) {
     `)
   })
 
+  it("handles conflicting color classes with tailwind-merge", async () => {
+    const source = `import * as React from "react"
+import { cn } from "@/lib/utils"
+
+function Foo({ className, ...props }: { className?: string }) {
+  return (
+    <div className={cn("cn-foo bg-primary", className)} {...props} />
+  )
+}
+`
+
+    const styleMap: StyleMap = {
+      "cn-foo": "bg-muted text-foreground",
+    }
+
+    const result = await applyTransform(source, styleMap)
+
+    // bg-muted from style map should be overridden by bg-primary from existing.
+    expect(result).toMatchInlineSnapshot(`
+      "import * as React from "react"
+      import { cn } from "@/lib/utils"
+
+      function Foo({ className, ...props }: { className?: string }) {
+        return (
+          <div className={cn("text-foreground bg-primary", className)} {...props} />
+        )
+      }
+      "
+    `)
+  })
+
+  it("handles conflicting size classes with tailwind-merge", async () => {
+    const source = `import * as React from "react"
+import { cn } from "@/lib/utils"
+
+function Foo({ className, ...props }: { className?: string }) {
+  return (
+    <div className={cn("cn-foo text-lg rounded-lg", className)} {...props} />
+  )
+}
+`
+
+    const styleMap: StyleMap = {
+      "cn-foo": "text-sm rounded-md border",
+    }
+
+    const result = await applyTransform(source, styleMap)
+
+    // text-sm and rounded-md from style map should be overridden.
+    expect(result).toMatchInlineSnapshot(`
+      "import * as React from "react"
+      import { cn } from "@/lib/utils"
+
+      function Foo({ className, ...props }: { className?: string }) {
+        return (
+          <div className={cn("border text-lg rounded-lg", className)} {...props} />
+        )
+      }
+      "
+    `)
+  })
+
+  it("handles multiple duplicates in cva base and variants", async () => {
+    const source = `import * as React from "react"
+import { cva } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "cn-button rounded-md",
+  {
+    variants: {
+      variant: {
+        default: "cn-button-default bg-primary",
+      },
+    },
+  }
+)
+
+function Button({ className, ...props }: React.ComponentProps<"button">) {
+  return (
+    <button className={cn(buttonVariants({ className }))} {...props} />
+  )
+}
+`
+
+    const styleMap: StyleMap = {
+      "cn-button": "rounded-lg border font-medium",
+      "cn-button-default": "bg-muted text-foreground",
+    }
+
+    const result = await applyTransform(source, styleMap)
+
+    // rounded-lg should be overridden by rounded-md, bg-muted should be overridden by bg-primary.
+    expect(result).toMatchInlineSnapshot(`
+      "import * as React from "react"
+      import { cva } from "class-variance-authority"
+      import { cn } from "@/lib/utils"
+
+      const buttonVariants = cva(
+        "border font-medium rounded-md",
+        {
+          variants: {
+            variant: {
+              default: "text-foreground bg-primary",
+            },
+          },
+        }
+      )
+
+      function Button({ className, ...props }: React.ComponentProps<"button">) {
+        return (
+          <button className={cn(buttonVariants({ className }))} {...props} />
+        )
+      }
+      "
+    `)
+  })
+
+  it("handles conflicting spacing classes with tailwind-merge", async () => {
+    const source = `import * as React from "react"
+import { cn } from "@/lib/utils"
+
+function Foo({ className, ...props }: { className?: string }) {
+  return (
+    <div className={cn("cn-foo mx-4 py-2", className)} {...props} />
+  )
+}
+`
+
+    const styleMap: StyleMap = {
+      "cn-foo": "mx-2 py-4 flex",
+    }
+
+    const result = await applyTransform(source, styleMap)
+
+    // mx-2 and py-4 should be overridden by mx-4 and py-2.
+    expect(result).toMatchInlineSnapshot(`
+      "import * as React from "react"
+      import { cn } from "@/lib/utils"
+
+      function Foo({ className, ...props }: { className?: string }) {
+        return (
+          <div className={cn("flex mx-4 py-2", className)} {...props} />
+        )
+      }
+      "
+    `)
+  })
+
+  it("handles arbitrary values with tailwind-merge", async () => {
+    const source = `import * as React from "react"
+import { cn } from "@/lib/utils"
+
+function Foo({ className, ...props }: { className?: string }) {
+  return (
+    <div className={cn("cn-foo p-[20px]", className)} {...props} />
+  )
+}
+`
+
+    const styleMap: StyleMap = {
+      "cn-foo": "p-4 rounded-xl",
+    }
+
+    const result = await applyTransform(source, styleMap)
+
+    // p-4 should be overridden by p-[20px].
+    expect(result).toMatchInlineSnapshot(`
+      "import * as React from "react"
+      import { cn } from "@/lib/utils"
+
+      function Foo({ className, ...props }: { className?: string }) {
+        return (
+          <div className={cn("rounded-xl p-[20px]", className)} {...props} />
+        )
+      }
+      "
+    `)
+  })
+
   it("preserves allowlisted classes in cva base string", async () => {
     const source = `import * as React from "react"
 import { cva } from "class-variance-authority"